CSS - 浮动 - 李联华的博客网

文章目录

5. float可以让元素默认转换为行内块元素
6. 浮动的目的就是为了让多个块级元素同一行上显示。最核心的关键点就是怎么排列的，是否占有位置
7. 清除浮动方法1，clear:both

1. 使设置了float的元素脱离标准流（normal flow）的控制，不占位置，float后影响原本标准流的元素的位置。个人理解，标准流为flow 1，float后的流为flow 2，就像PS里面的图层1，图层2

2. 使多个div一行内显示

3. 最早用来控制图片，实现文字环绕图片的效果（如百度百科里面的）

4. 例子1. 加减注释玩一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /*		float: left;*/
        }

        .one {
            background-color: pink;
            /*		float: left;*/
        }

        .two {
            width: 110px;
            background-color: purple;
            float: left;
        }

        .three {
            background-color: skyblue;
            float: left;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

5. float可以让元素默认转换为行内块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            background-color: pink;
            float: left;
            /*可以让元素默认转换为行内块元素 特性*/
        }

        span {
            width: 150px;
            height: 100px;
/*            display: block;*/
            background-color: purple;
            float: left;
            /*妙用  如果已经给 行内元素添加了浮动 此时不需要转换了这个元素也可以有宽高*/
        }
    </style>
</head>

<body>
    <div>div</div>
    <span>I am span</span>
</body>
</html>

6. 浮动的目的就是为了让多个块级元素同一行上显示。最核心的关键点就是怎么排列的，是否占有位置

7. 清除浮动方法1，clear:both

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是清除浮动后造成的影响

clear:both div的左侧和右侧均不允许出现浮动元素(同时清除左右两侧浮动的影响)，且父级元素的高度为已经float的子元素高度的最大值，不会为0.

温馨提示 : 非特殊注明，否则均为李联华的博客原创文章，本站文章未经授权禁止任何形式转载
文章链接：https://www.ooize.com/css-floating.html

二维码