清除浮动
虽然浮动是一种实现布局的方式，但是浮动在父元素中看不见。一旦在元素标签内加入了浮动，浮动脱离了普通流，在页面渲染时并不会按照html结构的计算规则，浮动元素会导致父元素所设置的页面无法撑开，浮动甚至会让浮动的效果叠放在页面某些元素效果上。所以必要时，需要清除浮动，这也是浮动实现布局的重要一环。
普通流是什么？
页面渲染时，遵循“块级元素占据一行，行内元素一行水平排列占据它自身宽度，再来块级元素素依次向下排列”规律，并且这些元素从上到下，从左到右会将父元素所展示的页面撑开
脱离普通流：
父元素计算宽高的时候，发现不了浮动元素。一旦有浮动元素，块级元素不会按照“从上到下，从左到右”的顺序去展示页面，块级元素会收缩内容宽度（呈现inline-block的特性），那么，父容器不会被里面的浮动元素撑开；
行内元素则会能看见浮动元素，如文本或其他行内元素则会环绕浮动元素。
块级元素浮动，宽度会收缩（width: 100% 的用武之地）；行内元素浮动，以块级特性呈现（不用再写 display: inline-block）
伪类清除浮动(ie8以上适用）
<div class="clearfix"></div>浮动元素的父元素添加类
.clearfix::after {
content:'';
display: block;
clear: both;
}
定位
Normal Flow即浏览器默认的文档布局方式。
一旦添加了浮动和定位，脱离文档流之后，页面布局的规则发生变化。
position语法：
position : static absolute relative
position参数：
static : 无特殊定位，对象遵循static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。
注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。
这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
absolute : 将对象从文档流中拖出，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。使用[left]，[right]，[top]，[bottom]等属性进行绝对定位。注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。
网友评论