CSS布局基础（四）（CSS浮动）

CSS浮动

float: none(默认，不浮动)|left|right;

默认情况，所有元素都摊平在一个平面上，按照顺序依次排列

浮动则是将元素拉起来，脱离原有的平面，专业术语叫脱离文档流，然后视浮动方向不同，向左或者右 滑动到父元素边框或前面同为浮动的元素边上紧挨着。
此时，原有的其他元素就会往前面移动，占据前面的空位。

一个原则：块元素，要并排采用浮动即可

浮动元素表现出行内块特点

• 默认不再占据整行，而是根据实际内容调整宽高
• 可以手动设置宽高

布局原则

从大到小：

• 先规划大盒子（标准流），一般分为 头 身 尾
• 在每个大盒子内部再细分 盒子（并排就浮动）
• 在一步一步细分到显示内容的盒子

浮动布局重点

• 浮动盒子一般不放在最外层，而是在标准流的盒子里面
• 上下排列不浮动，左右排列使用浮动
• 相同维度的元素，一般要浮动都浮动，不浮动都不浮动，部分浮动容易影响布局
• 浮动盒子只会影响后面的标准流盒子，不影响前面的标准流盒子
• 浮动元素的父盒子如果没设置高度或者不方便设置高度或者不确定高度，一旦元素浮动，父盒子的高度会塌陷变为0，后面的元素会往上走。因此，我们需要在最后一个浮动元素上清除浮动，避免影响后续标准流盒子

清除浮动

在最后一个元素浮动后，可能需要清除浮动，否则有可能影响后续的标准流盒子。
li 元素浮动 导致 box 盒子高度为0 ，进而影响了 footer 盒子，飘到 li 列表里面去了。

<div class="box">
  <ul>
    <li class="content">1</li>
    <li class="content">2</li>
    <li class="content">3</li>
    <li class="content last">4</li>
  </ul>
</div>
<div class="footer">footer</div>

    .box li.content{
      width: 24%;
      height: 300px;
      background-color: #96C02E;
      float: left;
      margin-right: 10px;
      margin-bottom: 5px;
    }

• 方式一：
  追加带有清除浮动样式的块元素。
  在 li 标签后加一个li标签

  <li class="clr"></li>
  

  给追加的 li 赋予 清除浮动的属性

  .clr{
      clear: both;
  }
  

• 方式二
  给浮动元素的父元素添加 overflow 属性，值可以是 hidden, auto, scroll 都能实现清除浮动
• 方式三
  对浮动元素的父元素使用 after 伪元素清除浮动，其本质还是标签追加法

  /*  方式三 使用 :after 伪元素，对父元素追加一个空的块元素*/
    div.box:after{
      content: ""; /*after 用于定义这个伪元素的内容*/
      display: block; /*追加元素需要块元素，而伪元素默认为行内元素，故手动转块元素*/
      clear: both;
    }
/*鉴于低版本IE不支持 伪元素，出于兼容性考虑，为IE老版本加上*/
	div.box{
		*zoom:1;
	}

清除浮动时机

• 父元素没有设置高度
• 子元素有浮动
• 影响后续标准流盒子布局了