css学习8：浮动和流体布局

十七、浮动和文档流

1. 默认文档流

- 流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性

- 默认文档流,画格子,内联和块级

  - 内联元素，从左向右排列

   - 块级元素，从上向下排列

2. 脱离文档流

文档一旦脱离文档流，不受文档流的布局约束了，在算其父元素的高度时，就不包括其自身了。以下属会导致元素脱离文档流：

- float 浮动

- position 定位(绝对定位、固定定位)

 2. 浮动

- 子元素在父元素中浮动，会使其脱离文档流，

导致父元素对其的管理能力

- 浮动属性

  - `float：none`默认不浮动

  - `float：left`左浮动

  - `float：right`右浮动

(1)浮动过程：

- 脱离文档流不再撑起父元素

- 不再自占一行

- 在元素浮动的“当前行”向左或向右对齐

 (2)元素浮动特点

1.元素浮动后对父级的高度有影响，不再撑起父级的高度

2.元素浮动后可以在父元素的左侧或右侧排列

3.元素浮动后不自占一行

4.元素浮动后会对后面的文档流中的兄弟元素产生影响会遮盖其后面的兄弟元素

5.内联元素浮动后，自动变成块级元素

6.浮动元素仍受父元素影响，还是在父元素的范围内

7.当父元素内所有元素均浮动，元素们宽度相加大于父元素宽度时，会换行

8.当元素浮动时虽然不自占一行，但会向前占位，前方空值的位置都会属于自己所有，因此后方的元素换行时，不能占据元素向前占位的地域（见元素占位示意图）

9.当元素浮动时，原则会盖住其后方在文档流中的兄弟元素。但文字、图片等（行内元素和行内块）不会被盖住，其后兄弟元素的文字不会被盖住而是环绕浮动元素四周显示。解决方案包裹文字的元素浮动在前一个元素侧面。（见文字环绕示意图）

3. 清除浮动

- 清除浮动并不是去除浮动，而是将浮动带来的负面效果解决掉。因为浮动会产生高度坍塌

- 浮动的影响父元素无高度

- 父元素无高度后，父元素的兄弟元素会向上，发生被遮盖

（1）利用高度解决

给父元素高度，弊端是未必知道子元素的高度

（2）父元素也浮动

父元素浮动，会影响父元素的兄弟元素

（3）父元素溢出隐藏

overflow：hidden/auto，父元素中的子元素可能会被隐藏（利用BFC 块级格式化上下文中，使用该属性可保证浮动元素也可以被计算入父级的高度）

（5）用伪元和clear属性素解决

给父元素增加一个在尾部的伪元素

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearv {
	*zoom: 1;
} /*IE/7/6*/

4. 浮动流体布局

PC 端页面会有一个内容部分的固定宽度（例如：1200px、1190px、1004px、960px 等等）。

液晶还没普及的年代，网页设计需要考虑 800×600 的分辨率。之后，液晶屏开始普及，1024×768，使用率接近 50%(国内)，所以很多网站都是以 1024 的宽度为标准进行设计的。

现在的液晶屏大小已经变得多样化，4k 时代到来，高分辨率，让 pc 端页面布局的宽度设计变 得更加要复合用户群。

(1) 分析 pc 端页面布局特点

pc 端布局都存在一个用于适应最小屏幕显示的居中元素。一般会把内容的结构都放在这个居中的元素中，左右两侧留白。

 因此在 pc 端布局中，可以在用于划分某个部分的元素内部加入一个用于居中的元素。如：

 (2) CSS reset

HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。这就是CSS reset。

/* 星号的效率过低，非练习时可以自定义某些元素去掉margin: 0;padding: 0; */
* {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
}
ul {
	list-style: none;
}
/* 清除浮动 */
.clearFloat:after {
	content: "";
	display: block;
	clear: both;
}
.clearFloat {
	*zoom: 1;
}
/* 如：针对学子商城居中1000宽度 */
.center {
	width: 1000px;
	margin: 0 auto;
}