CSS浮动

文章目录

浮动的概念

浮动带来的问题

清除浮动的方法

浮动的概念

1. .标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。
2. 浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。只要一个标签设置了浮动float属性，就会变成块级标签。

语法：

选择器 { float: 属性值; }

浮动的特性

1. 脱离标准流的控制移动到指定位置，（俗称脱标），浮动的盒子不在保留原先的位置
2. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
3. 任何元素添加浮动之后,都具有行内块元素的特性

浮动带来的影响

1. 脱标

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

2. 塌陷

浮动的元素会一行内显示并且元素顶部对齐，浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

清除浮动的方法

为什么要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子（由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响）。

清除浮动的本质

1. 清除浮动的本质是清除浮动元素脱离标准流造成的影响
2. 如果父盒子本身有高度，则不需要清除浮动
3. 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的方法

语法：

 选择器{clear:属性值;} 

方法一：额外标签法

缺点：添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。

<div style="clear:both"></div>，或者其他标签（如<br />

方法二：父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
缺点：无法显示溢出的部分

overflow:hidden | auto | scroll;

方法三：父级添加after伪元素

缺点：照顾低版本浏览器
代表网站： 百度、淘宝网、网易

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

方法四：父级添加双伪元素

缺点：照顾低版本浏览器
代表网站：小米、腾讯等

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