摘要：以下情况会触发根元素的值不为的值为，，的值为，和中的任何一个的值不为和显然我们在设置值为时使元素具有，那么子元素浮动便不会带来父元素的高度坍塌影响。
1.问题起源
在平时的业务开发写CSS中，为了满足页面布局，元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题，但是也带了一些副作用影响，比如，父元素高度塌陷，我们有好几种可以清除浮动的方法，最常用的就是设置父元素的overflow:hidden这个属性，每次在写代码的时候总是这样写，但是，自己从没深度思考过这些写为什么能够清除浮动，最近，自己也查阅了一些资料，谈谈自己的理解。
2.情景再现
先上代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动title>
<style>
.container{
border: 1px solid #000;
background: #0f0;
}
.child{
float: left;
}
style>
head>
<body>
<div class="container">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam dolorem eligendi laudantium libero magnam magni numquam voluptas voluptatem voluptatibus? Consequuntur delectus dolorem esse explicabo minus neque non quaerat voluptatum!
div>
div>
body>
html>
代码很简单，就是父元素container里面包含了一个子div元素child，然后我们使子元素的div向左浮动，页面展示效果如下：
结果来看，父元素只显示了四个方向边框的高度，背景颜色未显示，这是因为子元素浮动脱离文档流造成父元素高度塌陷。
3.解决方法
**
.container{
border: 1px solid #000;
background: #0f0;
overflow: hidden;
}
**
只在container父元素加了一行overflow:hidden
页面展示效果如下：
父元素高度被撑起来了，背景颜色也显示出来了。
4.BFC概念
我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。
先记住一个原则：如果一个元素具有BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。所以，BFC元素是不可能发生margin重叠的，因为margin重叠会影响外面的元素的；BFC元素也可以用来清楚浮动带来的影响，因为如果不清楚，子元素浮动则会造成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。
以下情况会触发BFC:
显然我们在设置overflow值为hidden时使container元素具有BFC，那么子元素child浮动便不会带来父元素的高度坍塌影响。
5.总结
设置overflow为hidden使元素具有BFC而不会受子元素的影响，但是当子元素过多需要滚动显示时，我们可以设置overflow的值为auto或acroll，超出父元素之外的元素会被隐藏。使用overflo:hidden也具有一定的局限性，所以我们应该根据具体的业务场景来选择合适的方法。
参考资料：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1499.html
摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。 除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义： 浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。 除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义： 浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...
摘要：为了实现这个效果，我们需要清除浮动。元素被向下移动用于清除之前的左右浮动。块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个内的元素。且为了不影响接下来的文档标准流，往往也要收尾做出清除浮动。以下从浮动到BFC的段落 摘自MDN 网络开发者float 浮动float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流...
阅读 2119·2023-05-11 16:55
阅读 3507·2021-08-10 09:43
阅读 2621·2019-08-30 15:44
阅读 2443·2019-08-29 16:39
阅读 586·2019-08-29 13:46
阅读 2010·2019-08-29 13:29
阅读 924·2019-08-29 13:05
阅读 694·2019-08-26 13:51
