1. 浮动 float
PC端有三种传统的布局方式：标准流、浮动、定位
1.1 标准流
什么是标准流？即标签按照规定默认排列，标准流是最基本的布局方式。
该规定如下：
1.块级元素独占一行，从上到下顺序排列
2.行内元素按照顺序由左到右排列， 触碰到父元素边缘则自动换行
1.2 为何需要浮动？
如何实现以下两个效果：
效果1：如何让多个块级盒子水平排成一行？虽然块级盒子转换为行内块元素可实现一行显示，但无法精准控制盒子之间的空隙。
效果2：如何实现两个盒子的左对齐和右对齐？
所以，单纯依靠标准流无法实现以上效果，必须采用浮动(float),浮动能改变元素标签默认的排列方式。其中，让多个块级元素在一行显示是其典型的应用。
1.3 何为浮动？
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘碰到 包含块or另一个浮动框的边缘。
语法：选择器 { float：属性值}
属性值如下：
none 元素不浮动 / left 元素向左浮动 / right 元素向右浮动
1.4 浮动的三大特性
特性1：浮动元素将脱离标准流(简称脱标)
① 脱离标准普通流的控制(先浮起)，再移动到指定位置(后移动)，俗称脱标
② 浮动盒子的原位置不被保留（故未浮动的盒子将自动占据该位置）
特性2：浮动元素将在一行内显示，并且元素顶部对齐
①如果多个盒子均设定为浮动，则它们会按照属性值在一行内显示，并且顶端对齐排列。
②浮动的元素互相紧贴在一起(无缝隙)，如果父级盒子的宽度过小无法容纳，多出的盒子将另起一行显示(比如缩小浏 览器窗口)。
特性3：浮动元素具有行内块元素的特性
①任何元素都能设定浮动。不管元素以前是什么显示模式，添加浮动后都具有行内块元素的特性。
注意：
·如果行内元素设定了浮动属性(有浮动属性意味着具备了行内块元素特点)，则可以直接设定width和height，同样也能直接设定padding和margin。
·添加浮动前，如果块级元素没有设定宽度，根据块元素特点，盒子的默认宽度和父级一样宽。但添加浮动后(浮动属性使得盒子具备了行内块元素特点)，如果块级元素依然没有设定宽度(此时默认该元素变成了行内块元素，相当于一个未设定宽度的行内块元素)，那么根据行内块元素的特点，未设定宽度时，默认宽度为自身内容的宽度。
·浮动的盒子中间没有缝隙，紧挨一起。
·行内元素设定了浮动，也具有行内块元素特点。
1.5 浮动如何使用？
浮动元素经常和标准流的父级元素搭配使用，为了约束浮动元素的位置，网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
网页布局的两大准则：
第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动
第二准则：先设置盒子大小，再设置盒子的位置。
1.6 浮动布局注意点
1.浮动和标准流的父盒子搭配。先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动，理论上其余的兄弟元素也得浮动。（一浮全浮）
·一个盒子里面有多个子盒子，如果其中一个子盒子设定为浮动，那么剩余子盒子应该设定浮动，以防止引起问题。
·浮动的盒子只会影响身后后面的标准流，不会影响前面的标准流。例如前面的标准流块级盒子独占一行，浮动盒子身后 还有个标准流块级盒子，那么浮动盒子将压在身后的标准流块级盒子上。
2. 清除浮动
2.1 为何要清除浮动？
前面所有浮动元素的都有一个标准流的父盒子，这些父盒子的共同特点是：有指定的height。但所有父盒子都必须有height吗？父级盒子在很多情况下，不方便设定高度（例如瀑布流、长短新闻等），理想的状态是让子盒子撑开父盒子，x个子盒子，父盒子自适应高度。然而，浮动盒子的特性是不占有位置，这将导致父级盒子高度为0，进而影响下面的标准流盒子，例如高度50px的footer将顶上来占用浮动盒子原来的位子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
清除浮动的本质:清除浮动元素对未设定高度的父盒子造成的影响。
如果父盒子本身有高度(height)，则不需要清除浮动。清除浮动后，父级盒子将根据浮动的子盒子自动检测高度。父级盒子有高度，则不会影响后面的标准流。
2.2 如何清除浮动？
清除浮动的策略是使浮动闭合，只让浮动在父盒子内部产生影响，不影响父盒子外面的其他盒子
语法：
选择器 { clear：属性值}
属性值如下：
left 表示不允许左侧有浮动元素（即清除左侧浮动的影响）
right 表示不允许右侧有浮动元素（即清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响 （实际开发最常用）
2.3 清除浮动的方法
1.额外标签法，也称隔墙法，为W3C推荐方法
该方法是在最后一个浮动元素的末尾添加一个空的标签，该空标签的样式设定是{ clear:both }，例如<div style="clear:both"> </div>，或者其他标签（如<br />等）。
优点：通俗易懂，书写方便 丨 缺点：添加许多无意义的标签，结构化较差
注意：新添加的空标签必须是块级元素。
2.在父级盒子中添加overflow属性
给浮动盒子的父级元素（注意是父级）添加overflow属性，将属性值设定为hidden、auto或scroll。该属性在外边距合并问题中使用过。
3.在父级盒子中添加 :after 伪元素
:after 方式是额外标签法的升级版，同样是给浮动盒子的父元素添加，.clearfix是一个class类的选择器（要给父盒子添加这个类名）。所谓“:after”伪元素就是在<body>中不存在的标签，即用CSS生成出一个具有标签特性的伪元素。类似于鼠标悬停的“：hover”
优点：没有增加标签，结构更简单 丨 缺点：照顾低版本浏览器 丨 代表网站：百度 淘宝网 网易等
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix {
/*兼容IE6和IE7专用*/
*zoom:1;
}4.在父级盒子中添加双伪元素
.clearfix是一个class类的选择器（要给父盒子添加这个类名）。该方法也是给浮动盒子的父元素添加，但更符合使浮动闭合的概念。因为before相当于在大盒子内部的前面插入一个空盒子，after相当于在大盒子内部的后面插入一个空盒子，形成完全的闭合。
优点：代码更简洁 丨 缺点：照顾低版本浏览器 丨 代表网站：小米 腾讯等
.clearfix:before，
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
/*兼容IE6和IE7专用*/
*zoom:1;
}
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
