float-浮动

特点

1. 浮动会从文档的正常流中删除，但是仍然会影响布局，基于此，一个元素浮动时，其他内容会环绕该元素
2. 浮动元素的外边距不会合并，如果其他元素与此浮动元素相邻，而且这些元素也有外边距，那么这些外边距不会与浮动元素的外边距合并
3. 浮动元素会建立包含块，生成块级框，这点很重要
4. 浮动元素，其包含块定义为最近的块级祖先元素

浮动元素的规则

浮动元素的规则有很多，暂时只列出以下三点，具体可以查看《CSS权威指南的》P292~P297了解

1. 浮动元素的外边界不会超出其父元素的外边界
2. 浮动元素彼此不会“覆盖”，也就是说一个元素向左浮动，而另一个元素已经在那个位置，后放置的元素将挨着前一个浮动元素的右外边界放置
3. 浮动元素的顶端不能比之前所有浮动元素或会计元素的顶端更高。
   如下所示，float2并没有跑到最上面去，而是与float1并排显示

  
我要float显示
  
浮动1
  
浮动2

显示如下：

Paste_Image.png

实例说明

例子1：
关于浮动元素会生成块级框的例子
考虑如下代码：

  
  
  
  



  

    我的
  

显示效果如下：

Paste_Image.png

作用是将div.cont居中，假如去除div.wrap的float属性，那么div.wrap的宽度为浏览器的宽度，最终无法使div.cont居中，float生成块级框就是： float后的元素的宽高 = 它的子元素的宽高,上面居中代码的 流程如下：

1. div.wrap根据position:relative; left: 50%;相对于父元素（它的父元素现在就是html，也就是浏览器的宽度，因此div.wrap的左边界线与屏幕的中心线对齐）
2. div.wrap浮动使得div.wrap的宽度=div.cont的宽度
3. div.cont使用position:relative; left: -50%; 这是相对于父元素宽度左移50%，因为父元素的宽度就等于它自身的宽度，因此就是相对于它本身左移50%，也就居中了

清除浮动的方法

方法一：
对受影响的元素使用： clear: both;
注意：一般这只是用于紧邻后面的元素的清除浮动
方法二：
对受影响的元素同时设置width:100%(或固定宽度) + overflow: hidden

注意：当子元素设置了float后，父元素包含块受到影响，当父元素缩成一条时，用clear:both清除浮动无效，

:before {
  content: '';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}