<style type="text/css">
<!--
#content{
margin:30px auto;
width:600px;
height:300px;}
#content_a{
width:150px;
height:100px;
border:3px solid #000000;
margin:20px;
background:#F90;}
#content_b{
width:150px;
height:100px;
border:3px solid #000000;
margin:20px;
background:#6c6;}
![]()
<!--
#content{
margin:30px auto;
width:600px;
height:300px;}
#content_a{
width:150px;
height:100px;
border:3px solid #000000;
margin:20px;
background:#F90;}
#content_b{
width:150px;
height:100px;
border:3px solid #000000;
margin:20px;
background:#6c6;}
.p{
border:3px solid #cc0000;}
--></style>
<Div id="content">
<Div class="p">
<Div id="content_a">第一个Div</Div>
<Div id="content_b">第二个Div</Div>
</Div>
</Div>
下面修改一下代码，使用float：left对content_a和content_b同事应用向左的浮动，两者在同一行显示。
理想效果是上面这样的。而实际效果是下面这样的。
父容器并没有把浮动的子元素包围起来，俗称塌陷。这个时候就要用到clear，clear属性定义了元素哪些边上不允许出现浮动元素。
对刚才的body里的代码稍加修改
<Div id="content">
<Div class="p">
<Div id="content_a">第一个Div</Div>
<Div id="content_b">第二个Div</Div>
<Div class="p">
<Div id="content_a">第一个Div</Div>
<Div id="content_b">第二个Div</Div>
<Div style="clear:left;"></Div>
</Div>
</Div>
</Div>
</Div>
clear:left属性只是消除其左侧Div浮动对它自己造成的影响，而不会改变左侧Div甚至于父容器的表现。
不过这种做法有个很大的问题就是向页面添加了内容来达到改变效果的目的，也就是数据和表现混淆。下面就用CSS来解决这一问题。
在CSS中添加一个类floatfix，对父容器添加floatfix类后，会为其追加一个不可见的块元素，然后设置其clear属性为left。
.floatfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:left;}
content:".";
display:block;
height:0;
visibility:hidden;
clear:left;}
这样就可以看到正确效果了。
扫一扫
643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
