CSS——display和浮动，

最新推荐文章于 2023-02-26 19:54:28 发布

一方1

最新推荐文章于 2023-02-26 19:54:28 发布

阅读量156

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_67737085/article/details/127195995

版权

CSS——display和浮动，以及clear属性（父级边框塌陷问题）

1.块级元素和行内元素

1.块级元素：独占一行

h1~h6
p
div
列表。。。。

2.行内元素：不独占一行，可以被包含在块级元素内，反之不可以

span
a
img
strong......

display的应用

1.先引入一个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px red solid;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span>
</body>
</html>

代码结果如下：
在这里插入图片描述
我们看到块级元素和行内元素的区别在于设置的宽高对于块级元素有用，而行内元素有多少文本便存在多少。
2.那么display便可以突破这种局限。
display：block；可以把行内元素变为块级元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px red solid;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px red solid;
            display: block;
        }
    </style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span>
</body>
</html>

在这里插入图片描述
这里加入了display便使行内元素转换为块级元素了。

clear属性清除浮动

clear: right;不允许右浮动
clear：left；不允许左浮动
clear：both；两边都不允许浮动
clear：none;不作任何举动

父级边框塌陷问题

1.``增加一个空的div标签，并且清除浮动,这是标准的解决父级边框塌陷的方法。

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

2.最实用方法
#father：after{
concent:’ ';
display:block;
clear:both;
}

小结：

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

对比

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

一方1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——display和浮动，

1.块级元素：独占一行2.行内元素：不独占一行，可以被包含在块级元素内，反之不可以。
复制链接

扫一扫