【css】浮动 解决父级边框塌陷问题的四种方法 display float overflow

标准文档流

指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。

标准文档流组成

• 块级元素（block）

  <h1>…<h6>、<p>、<div>、<ul>…

• 内联元素（inline）

  <span>、<a>、<img/>、<strong>…

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

display

属性

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

特性

• 块级元素与行级元素的转变（block、inline）
• 控制块元素排到一行（inline-block）
• 控制元素的显示和隐藏（none）

float

属性

• left：元素向左浮动（最常用）
• right：元素向右浮动
• none：默认值。元素不浮动，并会显示在其文本中出现的位置

清除浮动

• left：在左侧不允许浮动元素
• right：在右侧不允许浮动元素
• both：在左、右两侧不允许浮动元素
• none：默认，允许浮动元素出现在两侧

img {clear:both;}
/* 清除两侧浮动 */

父级塌陷

解决父级边框塌陷问题的方法：

• 浮动元素后面加空div（简单，但是会造成代码冗余）

  <div id="father">
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
      <div class="layer04">浮动的盒子……</div>
      <div class="clear"></div>
  </div>
  .clear{  clear: both;  margin: 0; padding: 0;}
  

• 设置父元素的高度（简单，但是固定高度会降低扩展性）

  <div id="father">
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
      <div class="layer04">浮动的盒子……</div>
  </div>
  #father {height: 400px; border:1px #000 solid; }
  

• 父级添加overflow属性（简单，但是下拉列表框的场景不能用）

  <div id="father">
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
      <div class="layer04">浮动的盒子……</div>
  </div>
  #father {overflow: hidden;border:1px #000 solid; }
  

• 父级添加伪类after（复杂，但是没有副作用）

  <div id="father" class="clear">
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
      <div class="layer04">浮动的盒子……</div>
  </div>
  <style>
      .clear:after{
          content: '';          /*在clear类后面添加内容为空*/
          display: block;      /*把添加的内容转化为块元素*/
          clear: both;         /*清除这个元素两边的浮动*/
      }
  :after{
      content: '';    
      display: block;
      clear: both;
  }
  </style>
  

overflow

属性

• visible：默认值。内容不会被修剪，会呈现在盒子之外
• hidden：内容会被修剪，并且其余内容是不可见的
• scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
• auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

inline-block和float的区别

display:inline-block

• 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便位置方向不可控制，会解析空格
• IE 6、IE 7上不支持

float

• 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
• float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式