浮动的问题

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。

如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。

另外，父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

清除浮动

清除浮动一：height

给标准流的父元素强制给一个合适的高度：

解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。

问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。

注意：这种height清除浮动的方法，只适合父盒子高度固定的情况。

清除浮动二：clear属性

作用：清除标签元素自身受到的前面的浮动元素的影响。

属性值：

  1. left    清除前面左浮动带来的影响
  3. right    清除前面右浮动带来的影响
  5. both    清除前面所有浮动带来的影响

给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。

clear: both; 解决：浮动元素影响后面元素标准流位置和贴边。 问题：父元素不能高度自适应，两个父元素之间如果有 margin， 效果不正确。 ### 清除浮动三：隔墙法 #### 外墙法： 在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear：both 属性。

解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。

问题：父元素没有高度自适应。

class=“box”> 
  1. <font style="color:#000080;"><p></p></font> 
  3. <font style="color:#000080;"><p></p></font> 
  5. <font style="color:#000080;"><p></p></font> 
  7. <font style="color:#000080;"><p></p></font>
class=“cl”> class=“box”> 
  1. <font style="color:#000080;"><p></p></font>
  3. <font style="color:#000080;"><p></p></font>
  5. <font style="color:#000080;"><p></p></font> 
  7. <font style="color:#000080;"><p></p></font>

.cl { 

  1. clear: both; 
  3. height: 10px;

}

内墙法：

在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素 标签高度为 0，添加 clear 属性。

解决：父元素高度自适应，浮动影响后面的元素位置和贴边。

缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。

class=“box”> 
  1. <font style="color:#000080;"><p></p></font> 
  3. <font style="color:#000080;"><p></p></font>
  5. <font style="color:#000080;"><p></p></font> 
  7. <font style="color:#000080;"><p></p></font> 
  9. <font style="color:#000080;"><div</font> <font style="color:#008080;">class=</font><font style="color:#DD2200;">"cl"</font><font style="color:#000080;">></div></font>

.cl { 

  1. clear: both;

}

清除浮动四：伪类

本质是使用伪类方法利用css代码书写一堵内墙。

伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。

:after：这个伪类表示选中的是某个标签内部的最后的位置。

书写方法：前面必须加普通的选择器，后面连续书写伪类名称。

将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。

.clearfix:after {

  1. content: <font style="color:#DD1144;">"1"</font>;    <font style="color:#888888;">/*添加一个文字内容*/</font> 
  3. display: <font style="color:#0086B3;">block</font>;    <font style="color:#888888;">/*将文字转为块级元素*/</font> 
  5. height: **0**;        <font style="color:#888888;">/*将盒子高度固定为0，避免影响父盒子高度*/</font>
  7. clear: <font style="color:#0086B3;">both</font>;    <font style="color:#888888;">/*清除前面浮动影响*/</font>
  9. visibility: <font style="color:#0086B3;">hidden</font>;  <font style="color:#888888;">/*将创建的元素占位置隐藏*/</font>

}

清除浮动五：溢出隐藏

小偏方：给内部有浮动子元素的父元素添加溢出隐藏属性，可以解决浮动的所有问题。

overflow: hidden; #### 补充：overflow 属性。 元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。 元素高度**没有设置**时，如果元素同时设置了overflow：hidden属性，

元素会自适应内容的高度。

高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。

浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

总结：

如果父元素高度是固定的，建议使用 height 属性解决。

如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。