清除浮动的几种常用方法

Posted 2020-10-15

首先，浮动这个样式的出现，仅仅只是为了实现图文环绕的效果，现在大多时利用浮动来布局；

浮动：

　　使元素推理文档流，按照指定方向发生移动；

　　遇到父级边界或者相邻的浮动元素会停下来；

浮动的特性：

　　1，块元素一行显示多个；

　　2，内联元素支持宽高；

　　3，没有设置宽度时由内容撑开宽度；

　　4，脱离文档流；

浮动的破坏性：

　　浮动元素脱离文档流后，导致父级元素高度塌陷。父级元素无法包裹住子级浮动元素；

 

为什么要清除浮动：

　　解决父级高度塌陷；

清除浮动的方法：

　　1，clear清除浮动

　　　　clear:left || right || both || none

　　　　　　clear:left  清除左侧浮动元素；

　　　　　　clear:right  清除右侧浮动元素

　　　　　　clear:both  清除左右两边

　　　　　　clear:none  不清除  

　　　　　　代码：

　　　　

 

　　　　效果图：

　　　　　　

　　　　缺点：如果浮动元素过多浪费标签；不优雅；

　　2.inline-block请浮动

　　　　

　　　　效果图：

　　　　　

　　　　缺点：margin：auto；失效；

　　3.<br />的clear属性请浮动

　　　　代码：

　　　　

　　　　效果图：

　　　　　

　　　　缺点： 当前页面有很多模块用到浮动时，每个用到的模块都要加<br clear="all" />;

　　　　　　　不符合w3c标准；

　　4.以浮制浮

　　　　给父级添加浮动

　　　　代码：

　　　　　　

　　　　　效果图：

　　　　　

　　　　　　缺点：不理智的行为，总会有个父级节点会塌陷；

　　5.：afte伪类请浮动

　　　　　代码：

　　　　　　

　　　　效果图：

　　　　

　　　　缺点：无；目前最优雅的清除浮动的方式；