CSS-盒子浮动

最新推荐文章于 2025-04-01 10:06:20 发布

原创最新推荐文章于 2025-04-01 10:06:20 发布 · 4.8k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css3 #html5

本文介绍了CSS中的浮动概念，包括float属性的用法，浮动元素的特性，以及如何进行浮动元素的布局。同时，探讨了清除浮动的本质和消除浮动影响的两种方法，包括设置固定高度和使用清除浮动的额外标签法与伪元素法。

文章目录

一、浮动导读
二、清除浮动
- 2.1 清除浮动的本质
- 2.2 消除浮动影响（副作用）的方法

一、浮动导读

1.1 什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框边缘

语法：
选择器 { float ：属性值；}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

1.2 浮动特性

①设置了浮动（float）的元素最重要特性：

脱离标准普通流的控制（浮）移动到指定位置（动）。俗称（脱标）
浮动的盒子不再保留原先的位置

②如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

③浮动元素会具有行内块元素特性
任何元素都可以浮动。不管原来是什么模式的元素，添加浮动之后具有行内块元素的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但添加浮动之后，它的大小根据内容决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理

1.3 网页布局准则

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
网页布局第二准则：先设置盒子大小，再设置盒子位置

在这里插入图片描述

由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

案例1：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }

        .box li {
            float: left;
            width: 296px;
            height: 285px;
            background-color: skyblue;
            margin-right: 14px;
        }

        /* 这里必须写 .box .li 要注意权重的问题 20 */
        .box .last {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

在这里插入图片描述

案例2：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 200px;
            background-color: gray;
            margin: 10px auto;

        }

        .box {
            width: 980px;
            height: 300px;
            margin: 10px auto;
            background-color: gray;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: pink;
            margin-right: 10px;
        }

        .box .four {
            margin-right: 0;
        }

        /* 只要是通栏的盒子（和浏览器一样宽） 不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin: 10px auto;

        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="four">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

在这里插入图片描述

二、清除浮动

2.1 清除浮动的本质

清除浮动本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动后,父元素就会自动检测子元素的高度,父级元素有了高度就不会影响到之后的布局了

2.2 消除浮动影响（副作用）的方法

对父级设置合适的高度
使用clear：both；清除浮动（额外标签法）
额外标签法会在浮动元素末尾添加一个新的标签。
例如：
<div style="clear:both"></div>
注意：要求这个新的空标签必须是块级元素
为父级元素设置overflow：hidden；
父级元素添加after伪元素,是额外标签法的升级版
父级元素添加双伪元素清除浮动