css中如何清除浮动

　　介绍

这篇文章将为大家详细讲解有关css中如何清除浮动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

清除浮动的方法有clearboth的方法,设置clearfix的方法,溢出的方法以及给父元素设置双伪元素的方法

在我们写代码的时候,有时因为使用了浮浮动元素而导致页面中某些元素不能正确的显示。

<强> css中如何清除浮动

<强>浮动导致的后果:

(1)由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素
(2)与浮动元素同级的非浮动元素会跟随其后,因为浮动元素脱离文档流不占据原来的位置
(3)如果该浮动元素不是第一个浮动元素,则该元素之前的元素也需要浮动,否则容易影响页面的结构显示

例:在一个div中设置三个div,让三个div的来撑开父元素

& lt; style> 　　.box{边界:1 px固体# ccc;背景:粉红色;} 　　r{宽度:100 px;高度:100 px;背景:红色;} 　　.green{宽度:100 px;高度:100 px;背景:绿色;} 　　.blue{宽度:100 px;高度:100 px;背景:蓝色;} 　　& lt;/style> 　　& lt; body> 　　& lt; div类=癰ox"祝辞 　　& lt; div类=皉ed"祝辞& lt;/div> 　　& lt; div类=癵reen"祝辞& lt;/div> 　　& lt; div类=癰lue"祝辞& lt;/div> 　　& lt;/div>

效果图:

css中如何清除浮动

加了浮动:左之后,父元素无法被撑开

css中如何清除浮动

<强>清除浮动的方法

<强>(1)使用明确的:两个清除浮动

在代码中在放一个空的div标签,然后给这个标签设置清楚:都来清除浮动对页面的影响。它的优点是简单,方便兼容性好,但是一般情况下不建议使用该方法,因为会造成结构混乱,不利于后期维护

& lt; div风格=懊魅?both"祝辞& lt;/div>

<强>(2)利用伪元素clearfix来清除浮动

给父级元素添加了一个:后伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的

.clearfix:{后 　　内容:““; 　　显示:块; 　　可见性:隐藏; 　　明确:; 　　}

<强>(3)溢出方法的使用

当给父元素设置了溢出样式,不管是溢出:隐藏的或溢出:汽车都可以清除浮动只要它的值不为可见就可以了,它的本质就是建构了一个黄东海,这样使得达到撑起父元素高度的效果

。边界框{:1 px固体# ccc;背景:# eff2f4;溢出:汽车}

<>强(4)双伪元素方法的使用

通过给父元素设置双伪元素来达到清除浮动的效果

.clearfix:,。clearfix:{后 　　内容:““; 　　显示:块; 　　明确:; 　　}

关于css中如何清除浮动就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

css中如何清除浮动