css浮动篇

时间:2021-1-18 作者:admin

1. 浮动简介

浮动定义:浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。

2. 浮动结论

假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前,远离页面边缘的一端是后。

    <style type="text/css">
        .a {
            height: 100px;
            background-color: green;
            width: 100px;

        }

        .b {
            border: solid 2px skyblue;
            height: 100px;
            width: 200px;
            float: left;
        }


        .c {
            height: 200px;
            background-color: red;
            width: 100px;
        }
    </style>


<body>
    <div class="a"></div>
    <div class="b">
    </div>
    <div class="c">
    </div>
</body>

a元素保持不动,b元素浮动起来,c元素顶到b元素的位置。结合评论体会下

3.清楚浮动

3.1 清楚浮动结论

这个结论可以好好体会下

对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

结合demo体会下:

3.2 清楚浮动4种方式

  • 浮动:脱离文档流

float: right | left | none;

  • 清除浮动

clear: left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

  • 浮动塌陷:父元素没有设置高度时,子元素都浮动,此时父元素的高度就为0了,因为没有子元素撑开高度(如果手动设置父元素高度就不会存在这种问题了)
<!--方式1:新增加个子元素 div  clear: both -->
    <style type="text/css">
        .father {
            background-color: pink;
            border: solid 2px skyblue;
        }

        .son1 {
            width: 100px;
            height: 200px;
            background-color: blue;
            float: left;
        }

        .uncle {
            height: 100px;
            background-color: red;
        }

        .son3 {
            clear: both;
        }
    </style>
    <div class="father">
        <div class="son1"></div>
        <div class="son3"></div>
    </div>
    <div class="uncle"></div>

<!--方式2. 给父元素增加(原理跟1一样)-->
 .clearfix::after{
    content: '',
    // 因为默认的伪元素是行元素
    display: block,
    clear: both
}
<!--方式3. 给父元素增加(溢出隐藏) -->
overflow: hidden  //(原理:因为overflow: hidden触发BFC规则,bfc去渲染页面时浮动的元素也参与计算高度)
<!--方式4. 手动给父元素设置高度-->

4. 浮动练习总结

  1. 浮动元素的开始位置是从父元素内容区域开始的,不包含内外边距和边框
  2. 浮动元素内部可以再浮动

5. 参考系列

参考

BFC机制

阮大大的浮动理解

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。