实训第五次总结

这次我们主要来说一下浮动：

网页布局的核心 —— 就是 用 CSS 来摆放盒子 。 CSS 提供了 3 种机制 来设置盒子的摆放位置，分别是 普通

流 （标准流）、 浮动 和 定位 ，其中：

1. 普通流 （标准流）

块级元素 会独占一行， 从上向下 顺序排列；

行内元素 会按照顺序 右 顺序排列，碰到父元素边缘则自动换行；

2. 浮动

让盒子从普通流中 浮 起来 , 主要作用让多个块级盒子一行显示。

3. 定位

将盒子 定 在浏览器的某一个 位 置 ——CSS 离不开定位，特别是后面的 js 特效。

总结： html 当中有一个相当重要的概念，标准流或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

元素的浮动是指设置了浮动属性的元素会 脱离标准普通流 的控制， 移动到其父元素中指定位置 的过程。

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

浮动的目的就是为了让多个块级元素同一行上显示。

float ：

加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。

特别注意，首先，浮动是脱标的，会影响下面的标准流元素，我们需要给浮动的元素添加一个标准

流的父亲，这样，最大化的减小了对其他标准流的影响， 其次，特别注意浮动可以使元素显示模式

体现为行内块特性。

浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题

出现， 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此 时就需要在该元素中清除浮动。 准确地说，并不是清除浮动，而是 清除浮动后造成的影响。

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题。

清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口

不让他们出来影响其他元素。

在 CSS 中， clear 属性用于清除浮动，其基本语法格式如下：

选择器 {clear: 属性值 ;}

清除浮动总结

1. 父级没高度 ;

2. 子盒子浮动了 ;

3. 影响下面布局了，我们就应该清除浮动了。

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的

块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素

与浮动元素同级的非浮动元素（内联元素）会跟随其后

若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级 div 定义 height

最后一个浮动元素后加空 div 标签 并添加样式 clear:both 。

包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto 。

为父级添加伪元素。