当前位置: 首页 > Web前端 > HTML

css如何清除浮动的影响

时间:2023-04-02 16:39:43 HTML

高度崩塌怎么办?当我们用一个div(姑且称之为大盒子)包裹其他盒子(小盒子)时,小盒子都设置了浮动的float。从我们日常的认知:小盒子是从大盒子里取出来的如果大盒子的知识内容部分(content)是空的,也不会影响什么。但是这里会导致高度塌陷,父元素的高度会消失。父母{背景颜色:#ccc;}.box01{宽度:100px;高度:50px;背景色:粉色;向左飘浮;}.box02{宽度:200px;高度:100px;背景颜色:浅蓝色;向左飘浮;-颜色:黄色;向左飘浮;

之前浮动和浮动后,上面两张图是浮动前后的对比。浮动后,父元素(大盒子)没有内容支持,导致高度塌陷(height:0;),那么如何解决高度塌陷的问题呢?这种给父元素设置固定高度,这样就不会造成塌陷的做法是很笨的,但是这个缺点也是很明显的。父元素的高度不能随子元素改变。给父元素添加样式overflow:hidden;这样父元素的高度就会随着内部子元素的变化而相应变化。它也有缺点最后(overflow溢出,hidden隐藏)超出父元素的字面意思会被隐藏,造成一些显示问题。也可以直接给父元素设置float,但是会影响后面的元素,就像上一篇文章说的,前面元素悬浮会导致后面元素跑到前面元素下面,导致内容被覆盖。还有一个比较高大上的清除浮动的方法,eg。伪元素的使用。伪元素:after用的最多最好的地方就是清除float,这样既不会给结构增加负担,又不会影响布局。例如.parents::after{content:"";/*注意:这里一定要写,即使没有内容可写。*/清除:两者;/*清除两边的元素*/display:block;/*伪元素行中的特性*/}后面会继续更新...