CSS Float

css定位机制（三种）

• 普通流（标准流）：网页默认状态，元素自动从左往右，从上往下的排列。
  块元素特点：

  
  
  image.png
  
  
  image.png

• 浮动

   1、 浮动会使元素向左或向右移动，只能左右，不能上下。
   2、浮动元素碰到包含框或另一个浮动框，浮动停止。
   3、浮动元素之后的元素将围绕它，之前的不受影响。
   4、 浮动元素会脱离标准流。
  

• 绝对定位

浮动的基本语法：

float：left|right|none（默认）

  给元素加了浮动之后，虽然会脱离文档流，但是仍处于文本流当中，仍然会占据文本空间的。

浮动后产生的问题：

• 元素使用浮动之后会脱离文档的普通流，出现“高度塌陷”也叫做浮动溢出。

  1、子元素的浮动会导致父元素发生塌陷，因为子元素进行了浮动，脱离了标准流，使得父元素无法检测到子元素，导致父元素塌陷、没有高度；
  2、浮动元素脱离了标准流，使得临近元素无法感知到浮动元素，普通元素就会占据浮动元素的位置，发生异位。
  
  在很多情况下，我们会把容器的高度设置为自适应的，它的高度由里面的内容去决定
  

清除浮动语法（闭合浮动）

clear:none|left|right|both;

 设置了float的元素会影响其他相邻元素，需要给受影响的元素使用clear清除浮动，clear只会影响自身，不会对其他相邻元素造成影响。

清除浮动的常用方法

• 1、在浮动元素后使用一个空元素。
  例如：
  <div class="clear"></div>

<style>
    .clear{
      clear:both; 
      }
</style>

• 2、给浮动元素的容器添加

overflow:hidden;

触发了块级格式上下文，相当于触发了一个新的盒子，将浮动元素包起来。
zoom:1
/*触发 低版本IE 6、7 */

• 3、使用CSS3的 ：after伪元素
  给浮动元素容器添加类名.clearfix。

.clearfix:after{
content：" .";
display:block;
height:0;
visibility:hidden;
clear:both;

}
.clearfix{
zoom:1;
}

• 其他方法：
  4、给父级元素定义height。只适合高度固定的 布局。
  5、父级元素也一起浮动，不推荐，会产生新的浮动问题。

image.png

image.png