CSS – 浮动

文章目录

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

  1. 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
  2. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动。
  3. 准确地说,并不是清除浮动,而是清除浮动后造成的影响
  4. clear:both div的左侧和右侧均不允许出现浮动元素(同时清除左右两侧浮动的影响),且父级元素的高度为已经float的子元素高度的最大值,不会为0.

©️李联华的博客网 当前IP地址:44.201.97.0,欢迎您的访问!

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

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

留下评论

Loading...