CSS之浮动

float:left;--左浮动

float:right;--右浮动

1.飘起来了（半脱离标准流）

 

2.下面的盒子会上来

 

3.浮动的盒子会遮挡下面上来盒子的格局，不遮挡内容

<style>

box1:{

      height:100px;

       width:100px;

       float:left;

       background:green;

}

box2

{

       width:500px;

       height200px;

       background:red;

}

</style>

<div class="box1"></div>

<div class="box2">aaa</div>

以上代码可见aaa文字浮动在box1旁边，文字没有被遮挡，格局被遮挡。

 

4.浮动的盒子在没设宽高前和内容一样宽高

<style>

.box1{float:left;}

</style>

<div class="box1">aaa</div>

5.如果所有的子元素都浮动，那么父级找不到高

解决：

1给父级添加 overflow：hidden；

2.使用伪元素自清除：

.box1::after

{

     content: '' ";

      display: block;

      height: 0;

      visibility: hidden;

      clear: both;

} .

box1{ *zoom: 1; // 兼容IE6 }

6.浮动的元素会脱离文档流

形成bfc，float：none;不算。