css中清除浮动的示例

小编给大家分享一下css中清除浮动的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

在css中,当我们对元素进行浮浮动时就需要清除浮动,因为当元素进行浮动时,元素就会脱离文档流,并且在css中任何元素都可以浮动,浮动元素会生成一个块级框,而不论它本身是何种元素。

<强>清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法?
一。什么时候需要清除浮动?

我们对元素进行了浮动(浮动)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上。

在css中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
浮动主要流行与页面布的局,然后没有使用后没有清除浮动,就会后患无穷。

知乎上截的图:

<强>分析HTML代码结构:

& lt; p类=皁uter"比; 　　类& lt; p=皃1"祝辞1 & lt;/p> 　　类& lt; p=皃2"祝辞2 & lt;/p> 　　类& lt; p=皃3"祝辞3 & lt;/p> 　　& lt;/p>

<强>分析CSS代码样式:

。外{边界:1 px固体# ccc;背景:# fc9;颜色:# fff;保证金:50 px汽车;填充:50 px;}。p1{宽度:80 px;高度:80 px;背景:红色;浮动:左;}。p2{宽度:80 px;高度:80 px;背景:蓝色;浮动:左;}。p3{宽度:80 px;高度:80 px;背景:黄土;浮动:左;}

这里我没有给最外层的p。外设置高度,但是我们知道如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开的。但是当内层元素浮动后,就出现了<强>影响:

1,父盒子的利润率受到影响,无法实现左右居中,
2,我没有给父盒子设置高度,浮动后父盒子的高度没有被撑开,图片中撑开的高度是填充带来的效果。

<强>清除浮动都有哪些方法?
清除(明确的)也有4个可能值。最常用的是,清楚左右两边的浮动.left和权利只能清楚一个方向的浮动的火眼金睛是默认值。

<强>方法一:添加新的元素应用明确的:两个;
<强> HTML:

& lt; p类=皁uter"比; 　　类& lt; p=皃1"祝辞1 & lt;/p> 　　类& lt; p=皃2"祝辞2 & lt;/p> 　　类& lt; p=皃3"祝辞3 & lt;/p> 　　类& lt; p=癱lear"祝辞& lt;/p> 　　& lt;/p>

<强> CSS:

.clear{明确:;高度:0;行高:0;字体大小:0}

<>强效果:

　　类& lt; p=皃2"祝辞2 & lt;/p> 　　类& lt; p=皃3"祝辞3 & lt;/p> 　　& lt; !——& lt; p类=癱lear"祝辞& lt;/p>——祝辞& lt;/p>

<强> CSS:

。溢流{溢出:汽车;变焦:1;//放大:1;是在处理兼容性问题 　　}

<>强效果图同上。

<强>原理:使用溢出属性来清除浮动有一点需要注意,溢出属性共有三个属性值:隐藏起来,汽车,可见。我们可以使用hiddent和汽车值来清除浮动,但切记不能使用可见的值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以。

<强>【补充】:
使用溢出属性
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:溢出:汽车、即可。<强>溢出:汽车,是让高度自适应,变焦:1;是为了兼容IE6,也可以用高度:1%;的方式来解决

css中清除浮动的示例