css实现左（右）侧固定宽度，右（左）侧宽度自适应---清除浮动

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css实现左（右）侧固定宽度，右（左）侧宽度自适应---清除浮动，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2281字，纯文字阅读大概需要4分钟。

内容图文

话说太多， 直接上代码，一看就能明白。 也许你会不屑一顾的说简单，可是我就喜欢写一些。。。。。。作为一个菜鸟，就要从基础努力学习才行。

方法多种， 你有新的方法可以补充说明，在此感谢！！

一、左边布局固定，右边自适应的布局

*{ margin:0; padding:0}

.whole{ width:100%;}

方法1： 左侧用float浮动，给固定宽度，右侧 左边距的距离==左侧层的宽度

　　css代码:
　　　　.left{ float:left;width:300px; background:red}
　　　　.right{ margin-left:300px; background:green; width:100%}

方法2：左边绝对定位absolate，右边代码没变化 还是右侧 左边距的距离==左侧层的宽度;

　　css代码:

　　　　.left{ position: absolute; left:0; width:300px; background:red}
　　　　.right{ margin-left:300px; background:green; width:100%}

方法3（个人喜好用）：左右两边都用绝对定位absolute， 父级相对定义（不影响，建议加个相对定义，避免重叠）

　　css代码:

　　　　.left{ position: absolute; left:0; width:300px; background:red}

　　　　.right{ position: absolute; left:300px; background:green; width:100%}

二、左边布局不固定，右边布局固定-----方法一致，位置换下而已

方法1、左侧用左浮动，右边距==右侧层的宽度的负值（因为你是左撑开，距离右侧的距离不错层）， 右侧的有浮动，固定宽度

.left{ float:left; width:100%; margin-right:-300px; background: red; }
　　.right{ float: right; width: 300px;background: blue;}

方法2、左右两边都用绝对定位absolute， 父级相对定义（不影响，建议加个相对定义，避免重叠） .left{ position: absolute; left:0; width: 100%; background: red;}
　　.right{ position: absolute; left:200px; width:200px; background: green;}

方法3、

清除浮动的方法就一笔带过， 都会

1、在浮动层的下面单独定义一个层

2、伪类方法:after (用在父类的布局层上)-常用

.father::after,.father::before{ clear: both; content: ""; display: table;}
　　

　　3、父级元素设置overflow为hidden或者auto，固定高度 也可以--不建议　

.father{overflow:hidden; width: 100%; }　 //overflow:auto; height:300px;

写的都比较简单， 文字表述很少，都是代码，说的思路再多，不让直接代码实际，用了后就明白意思了，good lucky。。

内容总结

以上是互联网集市为您收集整理的css实现左（右）侧固定宽度，右（左）侧宽度自适应---清除浮动全部内容，希望文章能够帮你解决css实现左（右）侧固定宽度，右（左）侧宽度自适应---清除浮动所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端