css之浮动

目录

1.css三大重点：

2.css定位机制有三种： 

3.标准流：

4.浮动：float

---

 

1.css三大重点：

                 盒子模型、浮动、定位

2.css定位机制有三种： 

                 标准流、浮动、定位

3.标准流：

                  盒子根据自身属性按从上到下，自左向右的排列

4.浮动：float

            ①元素脱离标准流，让元素漂浮在上层。例如：块状元素本身占一行，我们想让两个块状元素并列一行脱离他的特性，就用到浮动

            ②两类：左浮动：float：left；

                          右浮动：float：right；

            ③特点：浮动后的元素会漂浮在其他元素之上

                         浮动后的元素不会占位置（因为在上层）

                         浮动后的两个元素看起来是在同一行上显示的   

            ④高度塌陷：如果在一个盒子有且仅有两个小盒子，这两个小盒子都浮动，那么大盒子就没有内容了，没有内容就撑不起来高度，就会塌陷（即高度变小）

            ⑤浮动总是找离他最近的父类盒子对齐，不会超出父盒子的内边距

5.清除浮动：

                 ①目的：清除浮动后造成的影响，主要是为了解决父类高度塌陷的问题

                 ②clear：（给父盒子添加）

                                left；

                                right；

                                both；

                 ③ W3C 推荐的做法是通过在浮动元素末尾添加一个空的标签例如

                         <div style= ” clear:both ” ></div> ，或则其他标签 br 等亦可。

       优点： 通俗易懂，书写方便

       缺点： 添加无意义的标签，结构化语义化较差

                 ④ 父级添加 overflow 属性方法

       可以给父级添加： overflow 为 hidden|auto|scroll  都可以实现。

       优点： 代码简洁

       缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

3

                 ⑤ 在父元素中使用 after 伪元素清除浮动

                         :after 方式为空元素的升级版，好处是不用单独加标签了

       使用方法：

                              .clearfix:after {  

                              content: ".";

                              display: block;

                              height: 0;

                              clear: both;

                              visibility: hidden; 

                               }

                               .clearfix {*zoom: 1;}   /* IE6、7 专有 */

       优点： 符合闭合浮动思想 结构语义化正确

       缺点： 由于 IE6-7 不支持 :after ，使用 zoom:1 触发 hasLayout 。

       代表网站： 百度、淘宝网、网易等

       注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再 firefox 7.0 前的版本会有生成空格。

                 ⑥ 双伪元素清除浮动

       使用方法：

                                .clearfix: before, .clearfix: after {

                                 content: "";

                                 display: table;   /* 这句话可以出发 BFC BFC 可以清除浮动 ,BFC 我们后面讲 */

                                }

                                .clearfix: after {

                                 clear: both;

                                 }

                                .clearfix {

                                 * zoom: 1;

                                 }

       可以通过触发 BFC 的方式，可以实现清除浮动效果。 (BFC 后面讲解 Block formatting context ，块级格式化上下文 )

       优点： 代码更简洁

       缺点： 由于 IE6-7 不支持 :after ，使用 zoom:1 触发 hasLayout 。