CSS中浮动元素float及清除浮动

  筱晗's
2021-10-06 / 0 评论 / 2 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年10月06日,已超过18天没有更新,若内容或图片失效,请留言反馈。

今天给大家分享CSS中浮动元素Float以及他在前端页面中的一些用法。
1.浮动(float)的元素特征
脱离标准流的控制(浮)移动到指定位置(动),俗称脱标)
浮动的盒子不在保留原先的位置
left 左浮动 right 右浮动

浮动元素会脱离标准流简称(脱标)在标准流中不占位置。
浮动元素比标准流高半个级别,可以覆盖标准流中的元素。

  • 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动。
    浮动元素会受到上面元素边界的影响。

浮动的特点:一行显示多个 可以设置宽高
注意:

浮动元素不能通过 text-align:center或 margin:0 auto;让浮动本身元素水平居中

清除浮动

1.直接给父元素高度

优点:简单粗暴,方便

缺点:有些布局中不能固定父元素高度,如:新闻列表,京东推荐模块

2.额外标签法

操作:

在父元素内容的最后加一个块级元素

给添加的块级元素设置 clear:both

<style>
    .clear {
        clear: both;
    }
</style>
<div slass="clear"></div>

缺点:会在页面添加额外的标签,会让页面的 HTML 结构变得复杂

3.单伪元素清除法

操作:用伪元素代替了额外标签

.clearfix::after{    
/*伪元素必加条件*/                
content: ' ';    
/*转换为块级元素*/            
display: block;    
/*清除浮动*/            
clear: both;    
/*补充写法:在网页中看不到伪元素*/            
height: 0;
/*隐藏元素占位置*/
visibility: hidden;
}
/*兼容性*/
.clearfix {
*zoom: 1;
}

优点:直接给要清除的元素加类就行

4.双伪元素清除法

操作:

.clearfix::backdrop,    
.clearfix::after {    
/*转换为块级元素*/
content: '';    
/*转换为块级元素*/    
display: table;    
}                
.clearfix::after {    
/*清除浮动*/
clear: both;        
}    
/*兼容性*/
.clearfix {
*zoom: 1;
}

优点:项目中使用,直接给标签加类即可清除浮动。

5.清楚浮动(overflow)

给父元素添加overflow属性,将属性值设置为hidden , auto, 或scroll

<style>
    .box {
        overflow: hidden;
    }
</style>

优点:使用方便!

1

评论 (0)

取消