上次我们一起研究了css浮动，这次我们一起学习一下浮动对排版造成的影响，以及清除浮动影响的方式。
首先，我们来看一下浮动对合资高度的影响：
在标准流中内容的高度可以撑起盒子的高度：
示例代码：
<style>div{background-color: red;}p{width: 200px;height: 100px;background-color: blue;}</style><div><p></p></div>
在浮动流中浮动元素内容的高不可以撑起盒子的高度：
示例代码：
<style>div{background-color: red;}p{float: left;width: 200px;height: 100px;background-color: blue;}</style><div><p></p></div>
下面我们看下浮动对布局造成的影响：
浮动的盒子会释放空间，导致下面的盒子会移动到上面，并占据所有的空间，但浮动盒子的内容会把下面盒子的内容挤到一边，如图：
请看示例代码：
<style> .div1{ float: left; } .div2{ background-color: red; } p{ width: 500px; height: 100px; background-color: blue; } </style> <div class="div1">我浮动了<br>我浮动了<br>我浮动了<br>我浮动了<br></div> <div class="div2"> <p>我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子</p> </div>
浮动带来的影响会给我们的排版造成很大的麻烦，那么我们就要想办法清除浮动带来的影响:
清除浮动影响前前：
1、方法一：给前面的父盒子添加高度，如图：
添加高度后：
示例代码：
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; /*这里*/ height: 50px; } .box2{ background-color: purple; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } </style> <div class="box1"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>这是后面的1</li> <li>这是后面的2</li> <li>这是后面的3</li> </ul> </div>
2、方法二：利用clear:both;属性清除前面浮动元素对我的影响
添加clear:both;后：
示例代码：
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /*这里*/ clear: both; /*margin无效*/ margin-top: 30px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } </style> <body> <div class="box1"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>这是后面的列表项1</li> <li>这是后面的列表项2</li> <li>这是后面的列表项3</li> </ul> </div>
ps：使用clear:both之后margin属性会失效
3、方法三：在两个有浮动子元素的盒子之间添加一个额外的块级元素
添加后：
示例代码：
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } /*这里*/ .wall{ clear: both; } .h20{ /*利用额外块级元素实现margin*/ height: 20px; background-color: deepskyblue; } </style> <div class="box1"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <!--这里--> <div class="wall h20"></div> <div class="box2"> <ul class="ul02"> <li>这是后面的列表项1</li> <li>这是后面的列表项2</li> <li>这是后面的列表项3</li> </ul> </div>
ps:
- 在外墙法中可以通过设置额外标签的高度来实现margin效果
- 搜狐中大量使用了这个技术, 但是需要添加大量无意义的标签,所以，不常用
4、方法四：在前面一个盒子的最后添加一个额外的块级元素
添加后：
示例代码：
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /*margin有效*/ margin-top: 30px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } /*这里*/ .wall{ clear: both; } </style> <div class="box1"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> <!--这里--> <div class="wall"></div> </div> <div class="box2"> <ul class="ul02"> <li>这是后面的列表项1</li> <li>这是后面的列表项2</li> <li>这是后面的列表项3</li> </ul> </div>
ps：
- 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
- 和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦
5、方法五：给浮动元素父元素添加overflow:hidden;属性
overflow:hidden的作用是清除溢出盒子边框外的内容
添加后：
示例代码：
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; overflow: hidden; } .box2{ background-color: purple; /*margin有效*/ margin-top: 30px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } </style> <div class="box1"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>这是后面的列表项1</li> <li>这是后面的列表项2</li> <li>这是后面的列表项3</li> </ul> </div>
ps:
- 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
- IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
- 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
- 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突
给前面的盒子添加伪元素来清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /*margin有效*/ margin-top: 20px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } li{ float: left; } /*这里*/ .clearfix:after { /*生成内容作为最后一个元素*/ content: ""; /*使生成的元素以块级元素显示,占满剩余空间*/ display: block; /*避免生成内容破坏原有布局的高度*/ height: 0; /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/ visibility: hidden; /*重点是这一句*/ clear: both; } .clearfix { /*用于兼容IE*/ *zoom:1; } </style> </head> <body> <div class="box1 clearfix"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>这是后面的列表项1</li> <li>这是后面的列表项2</li> <li>这是后面的列表项3</li> </ul> </div> </body> </html>
ps:
- 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西
好了，本次我们就分享到这里，有不同意见请在留言区补充，我们相互学习，共同提高。