css display 浮动 overflow 父级边框塌陷问题-优快云博客

本文链接：https://blog.youkuaiyun.com/JL542180727/article/details/123636475

本文探讨了CSS中的display属性和float属性如何影响元素布局，特别是导致的父级边框塌陷问题。提出了四种解决方案：增加父级元素高度、添加空div清除浮动、使用overflow和父类添加:after伪类。其中，使用:after伪类清除浮动被推荐为最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1 h1~h6 p div 列表...

行内元素：不独占一行

img span a  strong ...

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

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
     block 块儿元素
     inline 行内元素
     inline-block  是块元素 但是可以内联 在一行
     none
    -->


    <style>
        div{
            height: 300px;
            width: 300px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            height: 300px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>块元素</div>
<span>行内元素</span>
</body>
</html>

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

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #fatcher{
            border: 1px  greenyellow solid;
            height: 800px;
            width: 1000px;
            margin: 10px;
            padding: 5px;
        }
        .l01{
            border: 1px  greenyellow dashed;
            display: inline-block;
            float: right;
        }
        .l02{
            border: 1px  greenyellow dashed;
            display: inline-block;
            float: right;
        }
        /*
        clert: right; 右侧不允许有浮动元素
        clert: left; 左侧不允许有浮动元素
        clert: both; 两侧不允许有浮动元素
        clear: none; 

        */
        .l03{
            border: 1px  greenyellow dashed;
            display: inline-block;
            float: right;
            clear:both;
        }

    </style>
</head>
<body>
<div id="fatcher">
    <div class="l01">
        <img src="666.png">
    </div>
    <div class="l02">
        <input type="button" value="7846541332132">
    </div>
    <div class="l03">
        <img src="images/555.png">
    </div>
</div>
</body>
</html>

父级边框塌陷的问题

 /*
  clert: right; 右侧不允许有浮动元素
  clert: left; 左侧不允许有浮动元素
  clert: both; 两侧不允许有浮动元素
  clear: none; 

   */

解决方案
1.增加父级元素的高度

#fatcher{
           border: 1px  greenyellow solid;
           height: 800px;
           width: 1000px;
           margin: 10px;
           padding: 5px;
       }

2.增加一个空的div,清除浮动

<div class="clear"><div>
.clera{
      clear: both;
      margin: 0;
      padding: 0;
}

3.overflow

在父级元素中增加 voerflow: hidden;

4.父类添加一个伪类：after

#father{
           content: ' ',
           display: block;
           clert: both;
}

小结

1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设有了固定的高度，就好被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类： after() 推荐
写法稍微复杂一点，但是没有副作用，推荐使用!

对比

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