深入css布局（3）—— 元素的定位与浮动
上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。
1.文档流
文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序行排列。那么也就可以理解成我们刚才所说的一个二维平面的概念。
那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。
image.png
2.定位描述
用position属性将一个元素相对于它或者它的祖先元素甚至是浏览器窗口通过top、left、right、bottom属性进行偏移，根据position属性的值，元素可以分为静态定位元素static（默认值）、相对定位元素relative、绝对定位元素absolute和固定定位元素fixed。
2.1 相对定位
1.元素根据其在当前文档流所在位置作为参考系，进行偏移。
2.设置相对定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。
image.png
2.2 绝对定位
1.元素会将其带有position为非static的祖先元素作为参考系进行偏移。
2.如果祖先元素里没有带有position为非static的，则会以body作为参考系。
3.定位后，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
image.png
2.3 fixed固定定位
固定的参照对像是可视窗口而并非是body或是父级元素，fixed定位的元素不会随着窗口的滚动而滚动。
2.跟absolute定位一样，定位后，原来在文档流中占据的位置，会被其他元素所占据。
image.png
3.浮动
3.1什么是 CSS Float（浮动）？
image.png
CSS的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。（浮动的本意是用来解决图片和文字的排版问题，但是由于它十分好用，所以被大部分开发者应用到了网页布局中，并成为了公认布局的一种方式）
float: left | right | none | inherit
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
image.png
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
image.png
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
image.png
3.2清除浮动
首先为什么要清除浮动？
由于浮动元素会脱离文档流显示，所以在浮动元素后面的块级元素会默认占据这些元素的位置，就会造成这些块级元素会在浮动元素的下层显示，出现浮动元素盖住后面正常文档流元素的效果，但这往往不是我们想要的结果。
其作用是改变 使用清除浮动的这个元素 与前一个声明的浮动元素 之间的默认布局规则，让使用清除浮动的这个元素 在新的一行中显示。
如何清除浮动？
clear属性，其值为left | right | both。
浮动元素或者非浮动元素的块级元素都可以使用这个属性来清除浮动（我们之前说inline和inline-block元素可以自动识别浮动，所以他们不需要清除浮动）， 他们的作用对象是前一个声明的浮动元素。如果使用clear:left | right 则是清除前一个float为left或者right的元素的浮动，clear：both则是清除前一个浮动元素，无论它是向哪边移动。那么使用clear属性的元素会在浮动元素的下方新开一行显示。
清除浮动的特殊作用
清除浮动可以解决父元素高度塌陷问题。当一个元素包裹了一些float元素的时候，由于float元素脱离文档流显示，所以父元素无法被这些元素撑开高度，导致父元素高度为0。
那么最常用的一种解决方案是：设置父元素的after伪元素的clear属性 来让其撑开父元素的高度。
.clearfix:after,
.clearfix::after{
content: " ";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
· 当我们没有设置clearfix的after伪元素时，会发现clearfix的高度为0，只有边框会显示出来。我们通过设置clearfix的after伪元素来让我们在不需要新增标签的情况下就可以清除掉浮动，并且clearfix类还可以复用。
· content和display属性会将after伪元素渲染出来，加上clear: both实现一个真实标签清除浮动的效果。
· 在一般浏览器中不设置visibility和height是没有问题的，但为了增加代码健壮性和规范性，建议加上。
:after 和 ::after的区别：:after的写法是css2的，可以兼容到IE8，::after的写法是css3中规定的，用以区分伪类(:hover)和伪元素(::before)。
发表评论 (审核通过后显示评论)：