CSS – 浮动

由 Deepseek提供支持
广告

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.
广告
广告图片
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;来自:俄亥俄州·哥伦布 ，欢迎您的访问!
文章链接：https://www.lilianhua.com/css-floating.html
二维码
请先登录才能参与答题
距本场结束剩 00天 00时 00分 00秒
轻量应用服务器 2核2G
200M峰值带宽，适用于网站搭建、Web应用、容器环境、电商独立站等
立即前往
扫码进入
扫描二维码购买
文澜千文

文澜千文

请登录以使用此功能。

热门搜索

公告

为了保障用户和本站点的合法权益，本网站制定了多项条例。点击同意即表示您遵守这些条例: 网站政策。

角力士（JAOLIS）[香港品牌]原味蛋卷皇208g礼罐鸡蛋卷饼干年货送伴手礼孕妇零食品 角力士（JAOLIS）[香港品牌]原味蛋卷皇208g礼罐鸡蛋卷饼干年货送伴手礼孕妇零食品
Loading...