5、浮动

最新推荐文章于 2025-11-24 21:21:07 发布

原创最新推荐文章于 2025-11-24 21:21:07 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS3 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了CSS中标准文档流的概念，详细讲解了块级元素与行内元素的区别及应用，展示了如何通过display属性控制元素显示方式，并重点介绍了float属性在布局中的作用及其带来的父级边框塌陷问题的多种解决方案。

5.1、标准文档流

在这里插入图片描述
块级元素：独占一行

h1~h6	p	div	列表...

行内元素：不独占一行

span	a	img	strong...

行内元素可以被包含在块级元素中，反之，则不可以~

5.2、display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    block:块元素
    inline:行内元素
    inline-block：既是行内元素，也是块元素，也就是说它既有块元素的特性，又能放在一行
    none:在页面上消失
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

5.3、float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            border: 1px #000 solid;
        }
        #div1{
            width: 200px;
            height: 200px;
            border: 10px solid red;
            display: inline-block;
            float: left;
        }
        #div2{
            width: 100px;
            height: 100px;
            border: 10px solid yellow;
            display: inline-block;
            float: left;
        }
        #div3{
            width: 100px;
            height: 100px;
            border: 10px solid green;
            display: inline-block;
            float: right;
            /*既有浮动的效果又有块元素的特性*/
            clear: both;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

</body>
</html>

5.4、父级边框塌陷问题

上面出现的问题：
在这里插入图片描述
父边框出现问题

clear

clear:right; 右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear：both; 两侧都不允许有浮动元素

解决方案

增加父级元素的高度

#father{
    border: 1px #000 solid;
    height: 300px;
}

在这里插入图片描述

增加一个空的div标签，清除浮动

#clear{
    clear: both;
    margin: 0;
    height: 0;
}

<div id="clear"></div>

在这里插入图片描述

overflow

在父级元素中增加一个overflow:hidden

#father{
    border: 1px #000 solid;
    overflow: hidden;
}

overflow:hidden： 超出部分隐藏
overflow:scroll： 超出部分变滚动条

父类中添加一个伪类:after

#father:after{
    content: '';
    display: block;
    clear: both;
}

小结：

浮动后边加空div
- 简单，但是会有空div，我们因该尽量避免空div
设置父元素的高度
- 简单，元素假设有了固定的高度，就会被限制
overflow
- 简单，下拉的一些场景避免使用
父类添加一个伪类：after（推荐）
- 写法稍微复杂一点，但是没有副作用，推荐使用

5.5、对比

display
方向不可以控制
float
浮动起来的话会脱离标准文档流，所以哟啊解决父级边框塌陷的问题

学习视频链接：https://www.bilibili.com/video/BV1YJ411a7dy?p=18