CSS系列之标准文档流/display属性/浮动/边框塌陷问题/溢出处理/父级边框塌陷问题/inline-block和float的区别

CSS系列之标准文档流/display属性/浮动/边框塌陷问题/溢出处理/父级边框塌陷问题/inline-block和float的区别

01 标准文档流

• 标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这是元素默认的排列方式。（未排版）
• 标准文档流组成：
  • 块级元素（block）
    • h1~h6、p、div、列表
  • 内联元素（inline）
    • span、a、img、strong
    • 内敛标签可以包含于块级标签

---

02 display属性

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

---

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

---

• 块元素排在一行的方法
  • inline-block
  • float

---

03 浮动

• float属性

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本出现的位置

---

04 边框塌陷问题

• 浮动元素脱离标准文档流会出现边框塌陷

• 清除浮动的方法

  • img{
        clear：both；/*清楚两侧浮动*/
    }
    

• clear属性

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

---

05 溢出处理

• Overflow属性

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

---

06 如何解决父级边框塌陷问题

• 浮动元素后面架空div

  • 方式简单，但是空div会造成HTML代码冗余

• 设置父元素的高度

  • 方式简单，但是元素固定高会降低扩展性

• 父级添加overflow属性

  • 方式简单，但是在下拉列表框的场景下不能用

• 父级添加伪类after

  • 写法比上面稍微复杂一点，但是没有副作用，推荐使用

---

07 inline-block和float的区别

• display：inline-bloack
  • 可以让元素排在一行，并且支持宽度和高度的设置，代码实现起来方便
  • 位置方向不可控制，会解析空格
  • IE6\IE7上不支持
• float
  • 可以让元素排在一行并且支持宽度和高度的设定，可以决定排列方向
  • float浮动以后元素脱离文档流，会对周围元素产生赢下给，必须在它的父级上添加清楚浮动的样式

---