第七章 浮动

第七章 浮动

一，网页布局

1.常见的网页布局

​ 我们平时用的网站大部分都是1-n-1的布局。例如下图：

​ 上图就是一个1-3-1的布局，上面有一个部分是导航栏，中间有三个部分，下面有一个部分，这就是1-3-1布局。而我们经常见到的一般都是1-n-1的布局。

2.标椎文档流

标准文档流组成:

• 块级元素（block）
  <h1>…<h6>、<p>、<div>
• 列表内联元素（inline）
  <span>、<a>、<img/>、<strong>...

标准文档流的构成我们已经了解清楚的，是由块级元素和行内元素构成，那么我们可以将行内（内联）元素和块级元素相互装换吗？答案是可以。

二，display属性

我们之前学到过，行内元素可以多个在一行，不能设置宽高，而块级元素独占一行，可以设置宽高，那么这个display属性就可以做互相转换，其中的inline-block属性值比较特殊，设置完这个属性值的元素不独占一行，也可以设置宽高。

​ 应用场景：

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

三，浮动

​ float是我们在布局的时候经常使用的属性，使用完float之后就会脱离标准文档流，相当于浮了起来，和不浮动的元素已经不再一个平面。

• left：靠左浮动
• right: 靠右浮动
• none： 不浮动

​ 当我们用块级元素包裹的所有元素都浮动了以后，并且我们没有设置高度，有边框的时候，我们就会发现边框塌陷了，边框变成了一个直线。

​ 之所以发生这种情况是因为子级元素浮动脱离标准文档流，父级元素里面等于没有元素，所以高度等于0,才会发生边框塌陷，这个时候我们就要用到清除浮动了。

四，清除浮动

清除浮动，防止父级边框塌陷的四种方法:

• 浮动元素后面加空div(可以使用)
  • 简单，空div会造成HTML代码冗余。
• 设置父元素的高度（不建议使用）
  • 简单，元素固定高会降低扩展性。
• 父级添加overflow属性（不建议使用）
  • 简单，下拉列表框的场景不能用。
• 父级添加伪类after(推荐使用)
  • 写法比上面稍微复杂一点，但是没有副作用。

inline-block和float的区别

• display:inline-block
  • 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
  • 位置方向不可控制，会解析空格
  • IE 6、IE 7上不支持
• float：属性值
  • 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
  • float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

五，总结