html如何消除浮动的影响,css 如何清除浮动带来的影响

高度塌陷怎么办?

当我们用一个div(就叫大盒子吧) 取包裹其他盒子(小盒子)的时候,小盒子全部设置了浮动float, 从我们日常认知当中:小盒子从大盒子中拿出来,那么大盒子知识内容部分(content)空了并不影响到什么. 但是在这里会造成高度塌陷, 父元素的高度会消失

.parent{

background-color: #ccc;

}

.box01{

width:100px;

height:50px;

background-color:pink;

float:left;

}

.box02{

width:200px;

height:100px;

background-color:lightblue;

float:left;

}

.box03{

width:300px;

height:150px;

background-color:yellow;

float:left;

}

浮动前

浮动后

上面两组图是悬浮前后的对比,悬浮后父元素(大盒子)由于没有内容的支撑,造成了高度塌陷(height:0;)

那么如何解决的这个高度塌陷的问题呢?

这是个笨办法, 给父元素设置个固定的高度,这样就不会造成塌陷,但是这个弊端也很明显, 父元素的高度不能随子元素改变.

给父元素添加样式overflow:hidden; 这样父元素的高度会随内部子元素的改变做出相应的变化.同样也是有弊端的(overflow溢出, hidden 隐藏)字面意思超出父元素的部分会被隐藏起来,造成一些显示上的问题.

还可以直接给父元素设置浮动,但是会对后续的元素造成影响,就像上篇文章说的那样,前面元素的悬浮,会造成后面元素跑到前面元素的下面,造成内容覆盖.

还有一个比较高大上的方法可以清除浮动,eg.伪元素的使用.

伪元素:after用的最多的地方就是清除浮动,这样不会给结构上添加负担,而且不会影响布局

例如

.parents::after{

content:""; /*注意:这里一定要写 即使没有要写的内容也要有.*/

clear:both; /*清除两边的元素*/

display:block;/*伪元素行内的特性*/

}

后面还会持续更新...