css之元素浮动

Posted 2022-04-24 belongs-to-qinghua

　　什么时候用浮动——块级元素一行显示就使用浮动

　　浮动的特点——让元素脱标不占位置

　　什么时候清除浮动——父元素没有设置高度；父元素中所有的子元素都设置浮动

 

清除浮动的方法(掌握)：

1.额外标签清除浮动

　　步骤:（1）在浮动元素后直接添加一个空div标签；（2）选中该div标签设置属性clear: both;

2.单伪元素清除浮动[推荐使用]

.clearfix::after 
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
/* 将该元素隐藏 */
visibility: hidden;

.clearfix 
/* 兼容IE写法 */
zoom: 1;

3.使用before和after双伪元素清除浮动

.clearfix:after,.clearfix:before
    content: "";
    display: table;

.clearfix:after
    clear: both;


.clearfix
     *zoom: 1;

4.给父元素设置overflow: hidden;

　　注意：如果使用overflow: hidden;清除浮动的时候,必须保证父元素中没有定位超出父元素的的元素

5.对父级设置适合CSS高度