CSS的浮动

最新推荐文章于 2024-07-18 22:26:13 发布

verify.Mar

最新推荐文章于 2024-07-18 22:26:13 发布

阅读量1.2k

点赞数 31

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_80227523/article/details/139199550

版权

标准文档流

标准文档流的特性

（1）空白折叠现象：

无论多少个空格，换行，tab都会折叠为一个空格

（2）高矮不齐，底边对齐

（3）自动换行，一行写不满，换行写

行内元素和块级元素

从HTML的角度来讲，标签分为：

文本级标签：p，span，a，b，i， u，em

容器级标签：div，h系列，li，dt，dd

从CSS角度来讲，

行内元素：除了p之外，所有的文本级标签，都是行内元素，p是个文本级，但是是个块级元素

块级元素：所有的容器标签都是块级元素，还有p标签

行内元素和块级元素的相互转换

借助display属性将块级元素和行内元素进行相互转换。

块级元素转行内元素

display: inline; （给一个块级元素比如div设置）

那么这个标签将立即变为行内元素，此时它和一个span无异，inline就是行内，也就是话说，这个div不能设置宽度高度，但可以和别人并排了

行内元素转块级元素

给一个行内元素比如span设置

display: block;

它此时变成一个块级元素，也就是说，这个span可以设置宽度和高度，这个span必须霸占一行，别人无法和它并排，如果不设置宽度将撑满父亲

标准流里面的限制非常多，导致很多页面效果无法实现，如果我们现在就要并排，并且就要设置宽高，那该怎么办呢，办法是：移民！脱离标准流

css中有三种手段使一个元素脱离标准文档流

（1)浮动

（2）绝对定位

（3）固定定位

浮动的性质

现在有两个div，分别设置宽高

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 300px;
            background-color: yellowgreen;
        }

        .box2{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

此时，如果给这两个div增加一个浮动属性，比如float:left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            float: left;
            width: 200px;
            height: 300px;
            background-color: yellowgreen;
        }

        .box2{
            float: left;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

此时两个元素并排了，并且两个元素都能够设置宽度和高度了

性质1：浮动的元素脱标

脱标即脱离标准

证明1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            float: left;
            width: 200px;
            height: 300px;
            background-color: yellowgreen;
        }

        .box2{
            
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让第一个div标签出现了浮动，于是这个标签在另一个层面进行排列，而第二个div孩子自己的层面遵从标准来进行排列

证明2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <span>我爱学习</span>
</body>
</html>

代码中，span标签在标签流中，是不能设置宽高的（行内元素),但是，一旦设置为浮动之后，即使不转变成块级元素，也能设置宽高了

所有标签，浮动之后，已经不区分行内，块级了

性质2：浮动的元素相互贴靠

不会做动漫效果，可以找个视频看看

性质3：浮动的元素有“字围”效果

我们让div浮动，p不浮动

代码实现一下，就可以在浏览器中发现，div挡在了p，但是不会挡在p中的文字，形成

“字围”效果

标准流中的文字不会被浮动的盒子挡住

性质4：收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（比较像行内元素）

浮动的清除

这里的清除是清除浮动与浮动之间的影响

方法1：给浮动元素的祖先元素加高度

如果一个元素要浮动，那么它的祖先元素一定要有高度

有高度的盒子才能关住浮动

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素，所以就清除了浮动带来的影响了。

方法2：clear:both

clear就是清除，both指的是左浮动，右浮动都有清除。所以clear:both的意思就是不允许左侧和右侧有浮动对象

但是非常严重的一点是，它所在的标签，margin属性都失效了

方法3：隔墙法

在两个div中间加一个新的div隔开

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0px;
        }
        li{
            float:left;
            width: 150px;
            height: 30px;
            background-color: pink;
        }
        .cl{
            clear:both;
        }
        .h16{
            height: 16px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="cl h16"></div>
    <div class="box2">
        <ul>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </div>
</body>
</html>

内墙法：

公式：两个p都浮动，所以父亲div不能被撑出去，如果在家修一堵墙，就能够让div被儿子撑出高度，即：此时div可以自适应内容

<div>
    <p></p>
    <p></p>
    <div class="cl"></div>
</div>

一个父亲是不能被浮动的儿子撑出高度的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: green;
        }
        p{
            
            width: 100px;
            height: 100px;
            background-color: red;
        }

        
    </style>
</head>
<body>
    <div>
        <p></p>
        
    </div>
</body>
</html>

（1）我们在一个div里放一个有宽高的p，代码如上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: green;
        }
        p{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }

 
    </style>
</head>
<body>
    <div>
        <p></p>
        
    </div>
</body>
</html>

（2）可如果在此基础上，给p设置浮动却发现父亲div没有高度了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: green;
        }
        p{
            float:left;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .cl{
            clear:both;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <div class=".cl"></div>
    </div>
</body>
</html>

（3）此时，我们可以在div里面放一个div（作为内墙），就可以让父亲div恢复高度

内墙法的优势在于：内墙法可以给它所在的家撑出宽度（让box1有高），即：box1可以自适应内容。

方法4：overflow:hidden

意思为所有溢出边框的内容，都要隐藏掉

但是可以给父亲加上overflow:hidden，那么父亲就能被儿子撑出高了，这是一个偏方

学习笔记，参考github大佬的文章，链接在主页文章。

verify.Mar

关注

31
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
CSS的浮动

那么这个标签将立即变为行内元素，此时它和一个span无异，inline就是行内，也就是话说，这个div不能设置宽度高度，但可以和别人并排了。它此时变成一个块级元素，也就是说，这个span可以设置宽度和高度，这个span必须霸占一行，别人无法和它并排，如果不设置宽度将撑满父亲。代码中，span标签在标签流中，是不能设置宽高的（行内元素),但是，一旦设置为浮动之后，即使不转变成块级元素，也能设置宽高了。行内元素：除了p之外，所有的文本级标签，都是行内元素，p是个文本级，但是是个块级元素。
复制链接

扫一扫