css中 float浮动属性

最新推荐文章于 2022-11-11 16:40:09 发布

chenzhenjiu1991

最新推荐文章于 2022-11-11 16:40:09 发布

阅读量336

点赞数

原文链接：https://my.oschina.net/u/3672754/blog/1548055

版权

css中 float浮动属性介绍

float属性值有（left 、right）

清除浮动：

让父元素判断子元素占多大位置

父元素内属性clear：both；

在css内添加

伪类 .clearfix:after {content：“”;display:block;height:0px;clear:both; }

类 .clearfix {zoom:1;}

*****其中伪类clearfix：after意思是在div“clearfix“后面给一个content为空、display为块、高度为0、然后清除浮动。

使用方式是将类名添加为父元素类名之一。

清除浮动之后方便父元素获取子元素高度，便于后面元素的位置控制。

代码示例如下:其中padding是为了观察父元素位置和所占大小

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>清除浮动</title>
   <style type="text/css">
       * {
           margin: 0px;
           padding:0px;
       }

.clearfix:after {content:"";display:block;height:0px;clear:both;}
.clearfix {zoom:1;}

       .box {
           background: pink;
           width: 800px;
           padding:50px;
       }
       .box1 {
           background: red;
           width: 200px;
           height: 200px;
           float: left;
       }
       .box2 {
           background: yellow;
           width: 200px;
           height: 200px;
           float: left;
       }
       .box3 {
           background: blue;
           width: 200px;
           height: 200px;
           float: left;
       }
   </style>
</head>
<body>
   <div class="box clearfix">
       <div class="box1"></div>
       <div class="box2"></div>
       <div class="box3"></div>
   </div>
</body>
</html>