float清除浮动
程序员文章站
2023-12-13 22:30:10
清除浮动： 在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。即父级对象盒子无法被撑开，这个现象叫浮动溢出，为了防止这个现象的出现而进行的 ......
float清除浮动
float是css中布局非常常用的属性，通过设置浮动能够实现一些常见的布局，但是刚接触float属性的人很有可能会遇到一些问题。
1. float，可以让元素能够朝着一个方向进行浮动，常用float:right和float:left
.
.content{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
margin-left: 4px;
}
**2.**float元素虽然好用，但是它的问题也让人头痛，我给上面的三个content外面包裹一层div.wrapper,设置border,最后结果…
出现这样的结果是因为外层的wrapper不能够包裹住三个子元素，因为当给元素添加浮动之后，就会产生浮动流，而这些元素不能够被块级元素看见，所以外层的div就不会被子元素自动撑开。
那么是不是所有的元素都看不见带有浮动流的元素呢？当然不是，文本元素，带有文本属性，比如inline-block这样的元素，以及bfc元素都能够看见。
img就是默认带有display:inline-block的元素，所有结果如上图。
3.知道了有浮动流的存在会影响布局，那么怎么样清除浮动流，目前常用的做法就是通过父级的伪元素::aftert来实现。
.content{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
margin-left: 4px;
}
.wrapper{
border: 1px solid black;
width: 500px;
}
.wrapper::after{
content: "";
display: block;
clear: both;
}
总结
float是css布局中非常常用的属性，使用float会产生不对块元素可见的浮动流，可以在父级伪元素after上清除浮动流
清除浮动三件套
content: "";
display: block;
clear: both;
本文地址：https://blog.csdn.net/weixin_45645373/article/details/109256160