当前位置：首页 > news >正文

css 中float属性及clear的释疑

news 来源：原创 2025/6/15 20:56:38

float属性可以让元素脱离文档流，父元素中的子元素设置为float,则会导致父元素的高度塌陷。

<style type="text/css">
.father{                         /*没有给父元素定义高度*/background:#ccc; border:1px dashed #999; 
}
.box01,.box02,.box03{ height:50px; line-height:50px; background:#f9c; border:1px dashed #999; margin:15px; padding:0px 10px;float:left;                 /*定义box01、box02、box03三个盒子左浮动*/
}
</style>
</head> 
<body>
<div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div>
</div>
</body>
</html>

因为浮动元素脱离文档流，为了撑起父元素，通常可以在父元素内再增加一个块元素。

.box04{height: 100px;border-style: solid;
}
</style>
</head> 
<body>
<div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div><div class="box04">box04</div>
</div>

父元素的高度取决于box04的高度，则必须知道浮动元素的高度，并以此值来指定了box04的高度，显然不方便。

为解决此问题，可将box04设置清除浮动属性。清除浮动的意思是指，元素在左右不允许有浮动元素，如果左右存在浮动元素，元素自己就下移（不是将浮动元素下移）。

当clear属性设置为left,表示元素之前如果有左浮动元素，则元素本身下移到浮动元素之后。

.box04{ width: 100px;border-style: solid; clear:left;
}
</style>
</head> 
<body>
<div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div><div class="box04">a</div>
</div>

效果如下：

将box04的边框和文字隐去

.box04{  clear:left;
}
</style>
</head> 
<body>
<div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div><div class="box04"></div>
</div>

达到将父框撑起的效果，而且父框能够自动适合浮动框大小。