CSS（八）——浮动，父级边框塌陷的问题

最新推荐文章于 2024-01-07 09:54:37 发布

笔锋Sharpen

最新推荐文章于 2024-01-07 09:54:37 发布

阅读量154

点赞数

本文链接：https://blog.csdn.net/weixin_52725999/article/details/114818119

版权

CSS

浮动

标准文档流

块级元素：独占一行

h1~h6	p	div	列表...

行内元素：不独占一行

span 	a	img	strong...

行内元素可以包含在块级元素中，但是块级元素不能包含在行内元素中

display

是实现行内元素排列的方式，但是我们很多情况下使用的是float

<!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: block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

float

<!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;
            float: left;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;
            float: left;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

clear

上述代码在运行后，更改窗口的大小不难发现，每次窗口变化，其都要进行一次重新排版浮动

如果想要解决这个问题，我们只需要在添加一个clear：both，就可以了

clear属性规定了元素的那一侧不允许其他浮动元素

clear属性定义了元素的那边上不允许出现浮动元素。在CSS1和CSS2中，这是通过自动为清除元素（即设置了clear属性的元素）增加上外边距实现的。在CSS2.1中，实现元素上外边距之上增加清楚空间，而外边距本身并不改变，不论是哪一种改变，最终结果都是一样，如果声明为左边清除或右边清除，会是元素的上外边框边界刚好在该边上浮动的下外边距边界之下

默认值	none
继承性	no
版本	CSS1
Javascript语法	object.style,clear="left"

可能的值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

<!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;
            float: right;
            clear: both;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;
            float: left;
            clear: both;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

父级边框塌陷的问题

1. 增加父级元素的高度

简单，元素假设有了固定的高度，就会被限制

#father{
   border:1px red solid;
    height:800px;
}

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

简单，但是代码中尽量避免空div

<div class = "clear"></div>

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

3.overflow

简单，但是下拉的一些场景避免使用（会出现下拉框）

在父级元素中添加一个overflow：hidden

4.父类添加一个伪类 after（最认可的方案）

写法稍微复杂，但是没有副作用，推荐使用

#father:after{
    content:'';/*设置一个空内容*/
    display:block;/*将空内容变成一个块*/
    clear:both;/*使用clear清除浮动*/
}

笔锋Sharpen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS（八）——浮动，父级边框塌陷的问题

CSS浮动标准文档流块级元素：独占一行h1~h6 p div 列表...行内元素：不独占一行span a img strong...行内元素可以包含在块级元素中，但是块级元素不能包含在行内元素中display是实现行内元素排列的方式，但是我们很多情况下使用的是float<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>
复制链接

扫一扫