1.浮动
浮动元素的特征：
- 浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；
- 浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在。
浮动对其他元素的影响
a.对父容器的影响：造成父元素的塌陷
浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘，它无法撑开其父元素.
b.对其他浮动元素的影响：
浮动元素都向某个方向移动，直到其边框碰到其他元素的边框，如果包含框太窄，无法容纳多个浮动元素，那么其浮动元素向下移动，直到拥有足够的空间，如果浮动元素的高度不同，那么它们向下移动时可能被其他浮动元素卡住。
c.对普通元素的影响：
- 如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
- 如果兄弟元素为内联元素，则元素会环绕浮动元素排列
d.对文字的影响：
浮动元素旁边的文字框被缩短，从而给浮动元素留出空间，文字框围绕浮动元素。
e.对子元素的影响：
当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block)
清除浮动：
清除浮动指的是运用clear属性去解决浮动父容器高度塌陷的问题，clear属性规定元素的哪一侧不允许其他浮动元素。
···
<style>
body{
border: 1px solid brown;
}
.container{
border: 1px solid grey;
margin: 50px 30px;
width: 1000px;
background-color: pink;
}
.box1{
float: left;
width: 200px;
height: 30px;
background-color: #f00;
}
.box2{
float: left;
width: 200px;
height: 40px;
background-color: #0f0;
}
.box3{
float: left;
width: 200px;
height: 50px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="clear">1</div>
</div>
</body>
</html>
···
9.png
方法一：添加新的元素 、应用 clear：both；
清除浮动方法2：BFC（Block Format Content）清理浮动，BFC可以阻止垂直外边距折叠、不会重叠浮动元素、可以包含浮动。因此清理浮动在BFC的语境下就是“包含浮动”，也即让父容器形成BFC就可以。
.clear{
clear: both;
}
</style>
10.png
方法二：使用伪元素::after（推荐使用）
.container ::after{
content:"";
display: block;
clear: both;
}
11.png
方法三：形成BFC块级排版上下文；
用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素 设置了float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文。就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。
2.独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，顺便达到了清除浮动的目的。
···
.container{
overflow: hidden;
}
···
12.png
注意：BFC可以包含浮动，但是使用BFC清除浮动可能有副作用，
比如使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？
overflow属性会影响滚动条和绝对定位的元素；
position会改变元素的定位方式。
所有如果使用BFC清除浮动，还要考虑修复其可能产生的副作用。
要点
- 如果用了浮动，其父元素一般(最好)需要清除浮动
- 如果用了绝对定位，一般(最好)要给参考点设置position:relative
作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论