css浮动

aSuncat 2020-08-18

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

相关推荐