CSS编辑元素的浮动

1.元素浮动：

1）使用 float:left; 这样的格式设置元素的浮动方式，属性值能够是left,right；

2）元素设置为左浮动时，元素将从原区域浮动到浏览器的左侧页面；右浮动时，就会附在右侧的区域，并且元素是按照第一个元素在右侧的第一个位置，依次往左排列；

3）设置了浮动后，该元素至关于直接脱离元素的原来放置层，漂浮在该层之上，该元素位置下方的元素将占用该元素的位置。

2.浮动的做用：

1）子级浮动致使父级元素的高度塌陷；

解决办法：

1 ul{
2     /*从新设置高度*/
3     padding:10px;
4     /*触发BFC*/
5     overflow:hidden;
6 }

2）浮动具备包裹性（浮动以后只包含内容区域）；

1 <p>
2     显示内容
3 </p>
4 
5 p{
6    background-color:red;
7    float:left;  
8 }

执行以上代码后，只会在“显示内容”四个字的地方将背景色渲染成红色。

3）行内元素设置浮动后改变了display属性，也就能够设置相应的content的width和height值；

1 <a href="#">点一下</a>
2 
3 a{
4    float:left;
5 }

以上代码执行后，能够在审查时看见 a 的width和height都可以设置具体的值，再也不是auto。

4）元素浮动不会穿过padding区域，只会在content区域中；

1 <div>
2     <em>内容</em>
3 </div>
4 
5 div em{
6     float:right;
7 }

在网页中能够看见“内容”只是从content原来的左侧区域移动到了右侧。

5）浮动会致使脱离文档流，影响到其余的元素。（如最上面的第三点，你们能够本身用两个div来验证）