CSS浮动——浮动的特性、清除浮动

CSS浮动

一个页面基本包含了三种布局方式：标准流、浮动和定位

浮动（float）

浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到做边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器: (float: 属性值;)

浮动特性

​ 浮动元素会脱离标准流（脱标）。

​ 浮动元素会一行内显示并且元素顶部对齐。

​ 浮动的元素会具有行内块元素的特性。

设置了浮动的元素脱离标准普通流的控制移动到指定位置，浮动的盒子不再保留原先的位置。

为了约束浮动元素的位置，先使用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

一般一个元素浮动了，其余的兄弟元素也要浮动。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响他前面的标准流。

清除浮动

清除浮动之后，父级元素就可以根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

语法：

选择器{clear: 属性值}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

在实际开发中一般只用clear: both;

清除浮动的方法

1. 额外标签法也称为隔墙法，是W3C推荐的做法

   额外标签法会在浮动元素末尾添加一个空的标签，例如<div style=" clear: both"></div>,或者其他标签。（新添加的标签必须是块级元素）

   优点是通俗易懂，书写方便；缺点是添加许多无意义的标签，结构化差

2. 父级添加overflow属性

   可以给父级添加overflow属性，将其设置为hidden，auto或scroll。

   优点是代码简洁；缺点是无法显示溢出的部分。

3. 父级添加after伪元素

   :after方式是额外标签的升级版。给父元素添加

   .clearfix:after {
       content: "";
       display: block;
       height:0;
       clear: both;
       visibility: hidden;
   }
   .clearfix {/* IE6、7专有 */
       *zoom: 1;
   }
   

   优点是没有增加标签，结构更简单；缺点是需要照顾低版本的浏览器。

4. 父级添加双伪元素

   给父元素添加

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

   优点是没有增加标签，结构更简单；缺点是需要照顾低版本的浏览器。