前言：

本文内容：display和浮动、overflow及父级边框塌陷问题

推荐免费CSS3基础讲解视频：【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

display和浮动

块级元素：独占一行

行内元素：不独占一行

display

block 块元素
initial 行内元素
initial-block 块元素+行内元素
none 无

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        display：
            block 块元素
            initial 行内元素
            initial-block 块元素+行内元素
            none 无
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: initial; /*设置为行元素*/
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: inline-block; /*设置为块元素*/
        }
    </style>
</head>
<body>

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

浮动float

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性：

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动在其容器的右侧
  • none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
  • inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<head>
    <style>
        img {
            float: right;
        }
    </style>
</head>
<body>

<h1>向右浮动</h1>

<p>图像会在段落中向右浮动，而段落中的文本会包围这幅图像。</p>

<p><img src="https://i.loli.net/2021/10/01/lxhupX5fdjn8gsG.png" alt="jokerdig.com" style="width:200px;height:170px;margin-left:15px;">
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段
    落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落。</p>

</body>
</html>

overflow及父级边框塌陷问题

overflow

属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性：

  • visible - 默认。溢出没有被剪裁。内容在元素框外渲染
  • hidden - 溢出被剪裁，其余内容将不可见
  • scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
  • auto - 与 scroll 类似，但仅在必要时添加滚动条

overflow 属性仅适用于具有指定高度的块元素。

在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 “overflow:scroll”）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
    <html  lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: #eee;
                width: 200px;
                height: 50px;
                border: 1px dotted black;
                overflow: auto;
            }
        </style>
    </head>
<body>

<h1>CSS 溢出</h1>
<p>默认情况下，溢出是可见的，这意味着它不会被裁剪，而是在元素框外渲染：</p>

<div>当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。</div>

</body>
</html>

父级边框塌陷

clear

clear:right; 右侧不允许右浮动元素

clear:left; 左侧不允许右浮动元素

clear:both; 两侧不允许右浮动元素

clear:none;

解决办法：

  1. 增加父级元素高度

    1
    2
    3
    4
    #father{
        border:1px #000 solid;
        height:800px
    }

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

    1
    2
    3
    4
    5
    6
    7
    <div class="clear"></div>

    .clear{
        clear:both;
        margin:0;
        padding:0;
    }

  3. 用overflow来解决，具体使用方法参考上方内容

    1
    2
    /*例如：*/
    overflow:hidden;

  4. 添加一个伪类，after（推荐使用）

    1
    2
    3
    4
    5
    #father:after{
        content:'';
        display:block;
        clear:both;
    }