css3-浮动和display、父级边框塌陷

最新推荐文章于 2024-07-25 09:25:29 发布

1uuue

最新推荐文章于 2024-07-25 09:25:29 发布

阅读量228

点赞数 1

分类专栏： CSS3 文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_61727355/article/details/126593708

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.display和浮动

1.1 标准文档流

块级元素：独占一行 h1~h6 、p、div、列表…
行内元素：不独占一行 span、a、img、strong

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

1.2 display

display的值：

block 块元素独占一行，只有设置为块元素，高宽才有效，否则行内元素是由内容撑开的。

inline 行内元素一行可以写很多

inline-block 保持块元素的特性可以放在一行

none 消失，空间都没有了，但在源码里面存在

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
block:块元素
none：消失
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid paleturquoise;
            /*inline：行内元素*/
            display: inline;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid paleturquoise;
            /* inline-block既是行内元素也是块元素（保持块元素的特性，但是可以写在一行）*/
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

1.3 浮动

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px black solid;
        }
        .layout01{
            border: 1px paleturquoise solid;
            display: inline-block;
        }
        .layout02{
            border: 1px lightcoral dashed;
            display: inline-block;
        }
        .layout03{
            border: 1px orchid dashed;
            display: inline-block;
        }
        .layout04{
            border: 1px greenyellow dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="layout01"><img src="../images/1.PNG" alt=""></div>
    <div class="layout02"><img src="../images/2.PNG" alt=""></div>
    <div class="layout03"><img src="../images/3.PNG" alt=""></div>
    <div class="layout04">
        浮动的盒子可以向左也可以向右，直到它的外边缘碰到边框
    </div>
</div>
</body>
</html>

我们可以从结果看到，这三个图片都是再div块里面的。因为设置三个图片的display为inline-block，所以他们排成一排。还可以看出父级div是由最大的图片（元素块）撑起来的。

此时，我们让图片一进行浮动。

.layout01{
            border: 1px paleturquoise solid;
            display: inline-block;
            float: left;
        }

我们可以看到图片一浮起来了，div块的边框也变了。此时，可以这样想，浮动层和底层有两层。浮动层的元素是整个漂浮在上面。，浮动层的元素也会在底层占位置，所以还是按照行内块排列。

所以，display是一种实现元素排列的方式（走的是标准文档流，从上至下，从左至右），但我们很多时候都是使用浮动。

1.4 清除浮动

继续上面例子，让图片文字都浮动起来。

.layout01{
            border: 1px paleturquoise solid;
            display: inline-block;
            float: left;
        }
        .layout02{
            border: 1px lightcoral dashed;
            display: inline-block;
            float: left;
        }
        .layout03{
            border: 1px orchid dashed;
            display: inline-block;
            float: left;
        }
        .layout04{
            border: 1px greenyellow dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            float: left;
        }

父级div里没有元素了，所以它被压得很小，但其实是有元素的，只不过它们浮在div上面。

我们来清除浮动。方法：claer ：both（该元素两边都不允许浮动）

 .layout04{
            border: 1px greenyellow dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            float: left;
            clear: both;
        }

可以看到文字，因为不能两侧有浮动，所以它在div现面重新按照标准文档流排列。

2.父级边框塌陷问题

回顾：
clear:right 右侧不允许有浮动

clear:left 左侧不允许有浮动

clear:both 两侧不允许有浮动

clear:none

解决塌陷问题方案：
方案一：增加父级元素的高度；简单，但是有了固定的高度会成为限制，假设新增元素超过块并且浮动，还会造成塌陷。【不推荐使用】

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

方案二：增加一个空的div标签，清除浮动，新增div放在会塌陷的父级边框内部的最下面。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px black solid;
        }
        .layout01{
            border: 1px paleturquoise solid;
            display: inline-block;
            float: left;
        }
        .layout02{
            border: 1px lightcoral dashed;
            display: inline-block;
            float: left;
        }
        .layout03{
            border: 1px orchid dashed;
            display: inline-block;
            float: left;
        }
        .layout04{
            border: 1px greenyellow dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            float: left;
        }
        .clear{
            clear: both;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="layout01"><img src="../images/1.PNG" alt=""></div>
    <div class="layout02"><img src="../images/2.PNG" alt=""></div>
    <div class="layout03"><img src="../images/3.PNG" alt=""></div>
    <div class="layout04">
        浮动的盒子可以向左也可以向右，直到它的外边缘碰到边框
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

3.overflow

方案三：在父级元素中增加一个overflow属性

overflow 文字/控件属性超过容器属性。就会用overflow设置。

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

方案四：父类添加一个伪类:after

 /*在father后面执行一部分操作，相当于过滤*/
        #father:after{
            /*添加空内容*/
            content: '';
            /*将空文本变成一个正常的元素块*/
            display: block;
            clear: both;
        }

这个操作和第二种方式增加个空的div清除浮动操作是等同的。这种方案避免了在原本html基础上增加空的div。不改变原有代码基础上，增加一些东西（开闭原则）。

小结：

1）浮动元素后面增加空div -> 简单；代码中尽量避免空div

2）设置父元素高度 -> 简单；元素假设有了固定的高度，就会被限制

3）overflow -> 简单；下拉的一些场景避免使用

4）在父类中添加伪类（推荐使用） -> 写法稍微复杂，但是没有副作用

4.对比display和float

两者都可以进行相关元素的排版。

display：走标准文档流，方向不可控制。但是没有父级框塌陷的问题。

浮动：浮动起来脱离了标准文档流，可以左右任意浮动，但出现父级塌陷问题。

1uuue

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-浮动和display、父级边框塌陷

1.display和浮动 1.1 标准文档流块级元素：独占一行 h1~h6 、p、div、列表…行内元素：不独占一行 span、a、img、strong 注：行内元素可以包含在块级元素中，反之则不可以1.2 display display的值：block 块元素独占一行，只有设置为块元素，高宽才有效，否则行内元素是由内容撑开的。inline 行内元素一行可以写很多inline-block 保持块元素的特性可以放在一行 none 消失，空间都没有了，但在源码里面存在...
复制链接

扫一扫

专栏目录