首页 > 其他分享> 文章详细

浮动及清除浮动

2021-04-22 17:03:56 阅读：239 来源： 互联网

标签：浮动 after clearfix 清除元素 zoom

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

语法float：left|right|none

性质

1.浮动的元素会脱离标准流，且浮动之后，已经不区分行内、块级了

2.浮动的元素会互相贴靠，当窗口大小容纳不下时会自动换行

3.浮动可以用来处理文字围绕效果，如

div挡住了p，但不会挡住p中的文字，形成“字围”效果。标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）

4.一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

清除浮动

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

优点：通俗易懂，方便，缺点：添加无意义标签，语义化差

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

优点：代码简洁，缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3.使用after伪元素清除浮动（推荐使用）

.clearfix:after{/*伪元素是行内元素正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>

</div>
<div class="footer"></div>
</body>
优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

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

.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
优点：代码更简洁

缺点：用zoom:1触发hasLayout.

推荐使用

标签：浮动,after,clearfix,清除,元素,zoom
来源： https://www.cnblogs.com/huanxiongs02/p/14690429.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

浮动及清除浮动