CSS笔记之浮动

CSS笔记之浮动

浮动就是用来给网页进行布局设置的。
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
语法格式如下：
选择器 {float: 属性值；}
属性值有三个，分别是none(不浮动)、left(左浮动)、right(右浮动)。

浮动特性

1.浮动的元素会脱离标准流(脱标)。
就是指定浮动的盒子会到指定位置，脱离标准流，并且不再保留原来的位置。
2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示，并按顶端排列，如果显示不下，则会另起一行显示。
3.浮动元素会具有行内块元素特性。
如果是块级盒子没有设置宽度，默认宽度和父级一样宽，但是加了浮动之后，它的大小根据内容来决定。并且浮动的盒子中间没有空隙。

网页布局采取的一般策略：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置.
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

清除浮动

由于有些父元素不会指定盒子高度，当其中的子盒子设置为浮动时，他的父盒子不会产生塌陷，反而会进行收缩，因为父元素还是标准流，相当于二者不在同一维度，这时我们就需要清除浮动。
语法格式如下：
选择器 {clear：属性值；}

清除浮动的方法：
1.额外标签法，也称隔墙法，时W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如在最后设置为浮动的元素后添加<div style = "clear：both"></div>当作墙，添加的这个标签只能是块元素。
2.父级添加overflow属性。
将属性值设置为hidden、auto或scroll。缺点是无法显示溢出的部分。
3.父级添加after伪元素。
相当于是额外标签法的升级版，但不需要添加额外的标签，语法格式如下：

4.父级添加双伪元素。
完全清除浮动，相当于在盒子的前后都设置标签，语法格式如下：