摘要：清除浮动是用于什么场景父元素内部的子元素浮动后，会造成父元素的塌陷，父元素的高度为，因而不会显示样式。评价这是最优的清除浮动的方案。
清除浮动是用于什么场景？
父元素内部的子元素浮动后，会造成父元素的塌陷，父元素的高度为0，因而不会显示样式。
有时候，父级元素本来就是没有样式的，那么他塌陷不塌陷无所谓咯，不不不，图森破，如果父级元素后面还有元素，由于父级元素的塌陷，他们就会上来占据父级元素的位置，效果就是，子元素覆盖在了父级元素下面元素的上面。
所以，在需要应用父级元素的样式的时候，在不希望子元素覆盖父级下一个元素的时候，要清除浮动
html:
Box 1Box 2Box 3
css:
.box-set{
background-color: #e8aaa9;
}
.box {
background: #8ec63f;
width: 200px;
height: 100px;
float: left;
margin: 10px;
box-shadow: 20px 20px 10px #555;
}
.clean{
clear: both;
}
我的理解：
因为空元素的存在，父级元素识别内部元素整体时不再认为是浮动的，是有宽高的，因此并未塌陷。
不足之处：
给html加个空标签虽然简答有效，但它是语义化极差的，不推荐。
方法二：overflow技巧html：
Box 1Box 2Box 3
css:
.box-set{
background-color: #e8aaa9;
overflow: hidden;
}
.box {
background: #8ec63f;
width: 200px;
height: 100px;
float: left;
margin: 10px;
box-shadow: 20px 20px 10px #555;
}
overflow做了什么？
overflow 属性规定当内容溢出元素框时发生的事情。
我的理解：
overflow为父元素提供了一种检查内部元素的机制，在检查的过程中，识别出了内部的高度，父元素被撑起。
不足之处：
从效果图上，细心的你一定发现了overflow技巧和追加空标签的差别，是的，overflow把box的阴影给截断了，可能是父级元素并不将shadow的宽高值计入内部总宽高中，因此忽略。很多时候我们并不希望发生这样的事情。
方法三：clearfix技巧html:
Box 1Box 2Box 3
css:
.box-set :before,.box-set:after{
content:"";
display: table;
}
.box-set:after{
clear: both;
}
.box-set{
background-color: #e8aaa9;
/*在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的hasLayout的机制。*/
*zoom: 1;
}
.box {
background: #8ec63f;
width: 200px;
height: 100px;
float: left;
margin: 10px;
box-shadow: 20px 20px 10px #555;
}
我的理解：
在css中使用before和after实现了在不影响DOM结构的情况下插入元素，弥补了方法一的不足，具体实现特性和方法一有异曲同工之处。
评价：
这是最优的清除浮动的方案。
参考资料：HTML和CSS高级指南之二——定位详解
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111677.html
摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。 我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实...
摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。 我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实...
摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。 我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实...
摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。 我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实...
阅读 2360·2021-11-24 09:39
阅读 3381·2021-11-15 11:37
阅读 2148·2021-10-08 10:04
阅读 3918·2021-09-09 11:54
阅读 1858·2021-08-18 10:24
阅读 985·2019-08-30 11:02
阅读 1772·2019-08-29 18:45
阅读 1628·2019-08-29 16:33
