css浮动

标签：左右   ali   使用   lock   css   play   清除   缺点   超出   

1、浮动

1、标准流（文档流）：元素按部就班按照自身的特性排列

2、浮动定义：元素会脱离标准普通流的控制，移动到指定位置的过程

3、使用：

(1)     左浮动：float：left

(2)     右浮动：float：right

4、结论

(1)     浮动后的元素会脱离标准流，漂浮在其他没有浮动的盒子上边

(2)     浮动后的两个块状元素会在同一行显示

(3)     浮动后的元素不占有原来的位置

(4)     浮动后的元素不会超出父元素的范围

(5)     浮动后的元素自动的转化为行内块元素，浮动后的元素不超过父元素的内边距

2、清除浮动

1、定义：清除浮动：并不是清除浮动，而是清除浮动所带来的影响

2、为什么要清除浮动？

①    浮动后的元素不会撑开的父元素的高度，因为浮动是不占位置的

②    与浮动元素同级的非浮动元素会跟随其后

③    若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

3、如何清除浮动？

①    额外标签法：在浮动元素的后边加上标签

1)        <div style="clear: left;"></div>    

2)        清除左浮动 clear: left

3)        清除右浮动 clear: right

4)        清除左右浮动 clear: both  

5)        优点：通俗易懂，书写方便

6)        缺点：添加了额外的标签，结构化差

②    overflow属性：在父元素中添加

1)        overflow: hidden; 

2)        overflow: scroll; 

3)         overflow: auto; 

4)        优点：但是代码简洁 

5)        缺点：   盒子中多余的内容会被隐藏掉 

③    使用after伪元素清除浮动：给父元素添加

1)        .clearfix::after { content: ‘ ‘; display: block; clear: both; } 

2)        优点：符合闭合浮动思想 结构语义化正确

3)        缺点：IE6-7不支持:after

④    双伪元素清除浮动:给父元素添加after以及before伪元素

1)        .clearfix::after, .clearfix::before {  content: ‘‘;display: table;clear: both; }

2)         优点：代码简洁

3)        缺点：IE6-7不支持:after

css浮动

标签：左右   ali   使用   lock   css   play   清除   缺点   超出   

原文地址：https://www.cnblogs.com/wangxue13/p/13512908.html