第七章 浮动

第七章 浮动

标准文档流组成：块级元素（block）、内联元素（inline）

注：块级标签可以包含内联标签

1.display属性

**block:**块级元素默认值，带有换行符

**inline：**内联元素默认值，没有换行符

**inline-block：**行内块元素，具有行内和块级元素的特性

**none：**不显示

2.display特性

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

3.float浮动

• **left：**左浮动
• **right：**右浮动
• **none：**默认值，不浮动

4.边框塌陷

4.1 clear清除浮动

• **left：**左侧不允许浮动
• **right：**右侧不允许浮动
• **both：**左右两侧都不允许浮动
• **none：**默认值，两侧允许浮动

4.2 解决父级边框塌陷

• 浮动元素后面加空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;}
  

• 设置父元素高度（降低扩展性）

  #father {height: 400px; border:1px #000 solid; }
  

• 添加overflow属性（下拉列表不可用）

  #father {overflow: hidden;border:1px #000 solid; }
  

  **溢出处理：**overflow属性值：

  ​ visible：默认值，内容不会被修剪，在盒子外显示

  ​ hidden：内容被修剪，其余内容不可见

  ​ scroll：内容被修剪，显示滚动条查看其余内容

  ​ auto：内容被修剪，显示滚动条查看其余内容

• 添加伪类after

  .clear::after{
      content: '';          /*在clear类后面添加内容为空*/
      display: block;      /*把添加的内容转化为块元素*/
      clear: both;         /*清除这个元素两边的浮动*/
  }