作者:wz44_798 | 来源:互联网 | 2023-05-19 04:18
若元素没有设置宽高,那元素实际宽高是被内容撑起来,若元素自己有设置宽高,那实际面积于自己的盒子模型有关1、清除浮动的本质清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0
若元素没有设置宽高,那元素实际宽高是被内容撑起来,
若元素自己有设置宽高,那实际面积于自己的盒子模型有关
![](https://img.php1.cn/3cd4a/1eebe/cd5/5287a7b3296ea13e.webp)
1、清除浮动的本质
清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题。
(当父元素没有设置高度时,子元素又全浮动了,此时子元素脱离文档流而不占据位置,那就会出现父元素高度为0底下的盒子会跑上来。)
2、清除浮动的方法
a、额外标签法(很少用,不想添加下无意义的标签)
![](https://img.php1.cn/3cd4a/1eebe/cd5/02c379d60086f382.webp)
b、父级添加overflow方法(overflow:hidden)
![](https://img.php1.cn/3cd4a/1eebe/cd5/60405fda58cd0acd.webp)
![](https://img.php1.cn/3cd4a/1eebe/cd5/a5d7215df572c386.webp)
c、利用after伪元素清除浮动
![](https://img.php1.cn/3cd4a/1eebe/cd5/3e641eb5f5c8cd90.webp)
![](https://img.php1.cn/3cd4a/1eebe/cd5/1113165c4904ecc5.webp)
注意:清除浮动设置的那些 height visiblity 都是为了隐藏那个小点。(content:“ .”)
d、双伪元素清除浮动(最推荐,工作中常用)
![](https://img.php1.cn/3cd4a/1eebe/cd5/bff2716168d1ed7b.webp)