css_6day(浮动)

目录

为什么需要浮动

浮动的特性

浮动元素会脱离标准流

浮动元素一行显示

浮动元素会具有行内块元素的特性

伪类约束浮动元素位置

浮动盒子注意点

清除浮动

为什么要清除浮动

清除浮动方法

额外标签法

overflow

after伪元素

双伪元素法

---

为什么需要浮动

标准流当中的标签通常纵向排列，有的情况没有办法完成

网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动

浮动的特性

浮动元素会脱离标准流

浮动的盒子不再保留原来的位置，比如有两个盒子，给第一个元素加了做浮动之后，第二个盒子会到第一个盒子的位置上去

浮动元素一行显示

如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对其排列，但是如果父级宽度装不下这些盒子，多出来的盒子会另起一行对其

浮动元素会具有行内块元素的特性

行内元素有了浮动则不需要转换就可以直接给高度和宽度

如果块级盒子没有设置宽度，默认宽度和父级一样宽。添加浮动后，它的大小跟内容来决定

伪类约束浮动元素位置

我们先用标准流的父元素上下排列，之后内部子元素采取浮动排列左右

浮动盒子注意点

1.一个盒子里面有多个盒子，其中一个盒子浮动了，其它兄弟也应该浮动

2.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

比如有三个盒子第一个盒子不浮动，第二个盒子浮动，则第一个盒子不动，第二和盒子不动，第三个盒子压住第二个盒子

清除浮动

为什么要清除浮动

由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0，就会影响下面的标准流盒子

清除浮动方法

额外标签法

找到最后一个浮动的元素 加上应该clear:both 这个标签必须是块级元素

overflow

给父级元素增加overflow:hidden(外边距合并时也用此代码)

after伪元素

 <style>
        .clearfix:after {
            content: "";
            display: block;
            height :0;
            clear:both;
            visibility:hidden;
        }

        .clearfix {
            *zoom: 1
        }
</style>

双伪元素法

        .clearfix:before,.clearfix:after{
            content: "";
            display: block;
        }
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            *zoom:1;
        }