css之浮动——浮动的概念、为什么清除浮动？清除浮动的方式
目录
1 为什么浮动（float）？
浮动（float）最初仅仅是为了让内容环绕在浮动元素周围，后来利用它的特点逐渐将其用于布局。
浮动让布局多样化，但它会脱离正常流，造成一些副作用（如高度塌陷），如果不加以解决会直接影响整体布局。
2 为什么清除浮动？
浮动的一大缺陷是让父元素高度塌陷，也就是浮动元素不能把父元素的高度撑起来（清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题）；（附当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线）
另一大缺陷是影响兄弟元素的位置或样式。
3 清除浮动的几种方式
清除浮动本质上是说要清除浮动元素带来的一些影响（例如高度塌陷）。
1）父级元素（包含块）定义 height
原理：父级元素手动定义height，就解决了父级div无法自动获取到高度的问题。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
2）父级元素添加overflow属性（父元素添加overflow:hidden）
原理: 通过触发BFC方式，实现浮动（父元素添加overflow，且值不为visible时，通常是hidden）。必须定义width或zoom:1（用于兼容IE6），同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#father{
background-color: red;
zoom: 1;
overflow: hidden;
}
#son {
background-color: #00B7FF;
width: 100px;
margin-top:100px ;
float: left;
}
</style>
</head>
<body>
<div id="father">
<p>我是不浮动元素1</p>
<div id="son">我是浮动元素</div>
</div>
</body>
</html>
3）添加空白（没有任何内容）标签
给其设置clear：both；（在最后一个浮动标签后，新加一个标签，）
（添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度）
缺点：缺点：添加无意义标签，语义化差
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#father{
background-color: red;
zoom: 1;
}
#son_non{
clear: both;
}
#son {
background-color: #00B7FF;
width: 100px;
margin-top:100px ;
float: left;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我是浮动元素</div>
<div id="son_non"></div>
</div>
</body>
</html>
4）after伪元素清除浮动
原理：使用伪元素 :after 来代替空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用 :before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动。
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
注意：伪元素：after的位置。在元素中添加伪元素，其实就是在该元素内的最后面添加一个伪元素。所以咋这里需要向父元素div添加伪元素，而不是浮动元素添加
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#father{
background-color: red;
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
#father:after{
/*伪元素是行内元素 正常浏览器清除浮动方法;
:after 来代替这个空白标签，因为清除浮动需要在浮动元素后面
*/
content: ""; /*必须设置才有效 没有内容*/
display: block;/*必须设置才有效 伪元素是行内元素 正常浏览器清除浮动方法*/
clear: both; //
}
#son {
background-color: #00B7FF;
width: 100px;
margin-top:100px ;
float: left;
}
</style>
</head>
<body>
<div id="father">
<p>我不是浮动元素</p>
<p id="son">我是浮动元素</p>
</div>
</body>
</html>
百里于2020年3月19日
如果有错，请您指出！如有侵权，请联系我删除！
上一篇： 求无穷级数e^x的近似值代码教程