css中定位和浮动的详细讲解，案例与补充

请你一定要记得我好吗
262 阅读3分钟

浮动

前几篇文章说完css中的浮动和定位，还是有些懵，所以查了一些资料，看了一些视频，终于通透，在此总结一下

我们直接来看代码和图

一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 600px;
            height: 300px;
            background: deepskyblue;
        }
        .child1{
            width: 100px;
            height: 100px;
            background: #831ee0;
        }
        .child2{
            width: 100px;
            height: 100px;
            background: aqua;
        }
    </style>
<body>
    <div class="father">
         <div class="child1"></div>
         <div class="child2"></div>
    </div>
</body>
</html>

微信截图_20220404225836.png 二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 600px;
            height: 300px;
            background: deepskyblue;
        }
        .child1{
            width: 100px;
            height: 100px;
            background: #831ee0;
            float: left;
        }
        .child2{
            width: 100px;
            height: 100px;
            background: aqua;
        }
    </style>
<body>
    <div class="father">
         <div class="child1"></div>
         <div class="child2"></div>
    </div>
</body>
</html>

微信截图_20220404225932.png

child1左浮，脱离文档流，相当于浮起来了，它底下那块地就空出来了，所以child2就补上去了，但是由于他俩大小一样，完全遮盖住，所以看着的效果就是只有child1了。

三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 600px;
            height: 300px;
            background: deepskyblue;
        }
        .child1{
            width: 100px;
            height: 100px;
            background: #831ee0;
            float: left;
        }
        .child2{
            width: 100px;
            height: 100px;
            background: aqua;
            float: left;
        }
    </style>
<body>
    <div class="father">
         <div class="child1"></div>
         <div class="child2"></div>
    </div>
</body>
</html>

微信截图_20220404230240.png

如果两个都是同一边的浮动，就会变成一行，常用这种方法去把块级元素放在同一行

四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 600px
            background: deepskyblue;
        }
        .child1{
            width: 100px;
            height: 100px;
            background: #831ee0;
            float: left;
        }
        .child2{
            width: 100px;
            height: 100px;
            background: aqua;
            float: left;
        }
    </style>
<body>
    <div class="father">
         <div class="child1"></div>
         <div class="child2"></div>
    </div>
</body>
</html>

微信截图_20220404230703.png

你可以发现，父级的高度本来是靠子级往大撑的，结果现在子级都浮动了，两个自己都脱离文档流，父级高度成了0了(不是没有了，是高度为0了)，这就叫高度塌陷，有四种方法消除掉

Ⅰ.在浮动元素的后面加一个空的div标签专门用来消除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 600px;
            background: deepskyblue;
        }
        .child1{
            width: 100px;
            height: 100px;
            background: #831ee0;
            float: left;
        }
        .child2{
            width: 100px;
            height: 100px;
            background: aqua;
            float: left;
        }
        .clear{   
            clear: both;     <!--left，right，both三种-->
        }
    </style>
<body>
    <div class="father">
         <div class="child1"></div>
         <div class="child2"></div>
         <div class="clear"></div>
    </div>
</body>
</html>

微信截图_20220404231345.png

Ⅱ. ::after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 600px;
            background: deepskyblue;
        }
        .child1{
            width: 100px;
            height: 100px;
            background: #831ee0;
            float: left;
        }
        .child2{
            width: 100px;
            height: 100px;
            background: aqua;
            float: left;
        }
        .father::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
<body>
    <div class="father">
         <div class="child1"></div>
         <div class="child2"></div>
         <div class="clear"></div>
    </div>
</body>
</html>

它相当于在父元素的最后面添加了一个行元素，如果需要内容为空，就写''，一定要写

微信截图_20220404231345.png

但是这种有一个缺点，就是有一个父元素需要消除浮动，就得写一遍，所以有了第三种

Ⅲ.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 600px;
            background: deepskyblue;
        }
        .child1{
            width: 100px;
            height: 100px;
            background: #831ee0;
            float: left;
        }
        .child2{
            width: 100px;
            height: 100px;
            background: aqua;
            float: left;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
<body>
    <div class="father clearfix">
         <div class="child1"></div>
         <div class="child2"></div>
         <div class="clear"></div>
    </div>
</body>
</html>

谁想清除浮动，谁的类属性就加一个clearfix，这样就简单多了

四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 600px;
            background: deepskyblue;
        }
        .child1{
            width: 100px;
            height: 100px;
            background: #831ee0;
            float: left;
        }
        .child2{
            width: 100px;
            height: 100px;
            background: aqua;
            float: left;
        }
        .father{
            overflow: hidden;
        }
    </style>
<body>
    <div class="father clearfix">
         <div class="child1"></div>
         <div class="child2"></div>
    </div>
</body>
</html>

overflow: hidden本意是溢出隐藏，但是用在这里可以消除浮动

定位

相对定位relative

先说一句题外话

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 500px;
            height: 300px;
            background: deepskyblue;
        }
        .child1,.child2,.child3 {
            width: 100px;
            height: 100px;
            display: inline;
        }
        .child1{
            background: #831ee0;
        }
        .child2{
            background: blue;
        }
        .child3{
            background: yellowgreen;
        }
    </style>
<body>
    <div class="father">
         <div class="child1">1</div>
         <div class="child2">2</div>
         <div class="child3">3</div>
    </div>
</body>
</html>

微信截图_20220405000244.png 这是因为行级元素是不能设置宽高的，只能由内容去撑大，你设置的width: 100px;height: 100px;是无效的，所以要用display: inline-block;用了以后，两两之间会有一条缝隙，上图也是，只需把div放在一行，它们就紧紧的挨在一起了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 500px;
            height: 300px;
            background: deepskyblue;
        }
        .child1,.child2,.child3 {
            width: 100px;
            height: 100px;
            display: inline-block;
        }
        .child1{
            background: #831ee0;
        }
        .child2{
            background: blue;
        }
        .child3{
            background: yellowgreen;
        }
    </style>
<body>
    <div class="father">
         <div class="child1">1</div><div class="child2">2</div><div class="child3">3</div>
    </div>
</body>
</html>

微信截图_20220405000612.png

相对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 500px;
            height: 300px;
            background: deepskyblue;
        }
        .child1,.child2,.child3 {
            width: 100px;
            height: 100px;
            display: inline-block;
        }
        .child1{
            background: #831ee0;
            position: relative;
            left: 50px;
            top: 30px;
        }
        .child2{
            background: blue;
        }
        .child3{
            background: yellowgreen;
        }
    </style>
<body>
    <div class="father">
         <div class="child1">1</div><div class="child2">2</div><div class="child3">3</div>
    </div>
</body>
</html>

微信截图_20220405000904.png 可以看出他是相对于**自己原来的位置**变了，并且，虽然移动走了，但是它的空间是不释放的，也就是说，它虽然移动走了，但是后面的内容不能补上来

绝对定位absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .father{
            width: 500px;
            height: 300px;
            background: deepskyblue;
        }
        .child1,.child2,.child3 {
            width: 100px;
            height: 100px;
            display: inline-block;
        }
        .child1{
            background: #831ee0;
        }
        .child2{
            background: blue;
            position:absolute;
            left: 50px;
            top: 30px;
        }
        .child3{
            background: yellowgreen;
        }
    </style>
<body>
    <div class="father">
         <div class="child1">1</div><div class="child2">2</div><div class="child3">3</div>
    </div>
</body>
</html>

微信截图_20220405001403.png

可以看出absolute移走后会释放空间，后面的内容可以补上来，并且，绝对定位的元素的位置是相对于body的。，这里其实说的还不完全对，在后面的总结里会说。

固定定位fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background: deepskyblue;
            position: fixed;
            left: 500px;
            top: 500px;
        }
    </style>
</head>
<body style="height: 5000px">
    <div class="aaa">我是广告</div>
</body>
</html>

微信截图_20220405003359.png

不管滚动条怎么移动，它都会在一个地方不动，并且会释放空间。

总结

相对定位relative

​ 1.相对于自己的初始位置

​ 2.定位后空间不释放

绝对定位absolute

​ 1.位置相对于最近的、已定位的祖先元素，如果没有最近的、已定位的祖先元素，就相对于body

​ 2.定位后释放空间

固定定位fixed

​ 1.位置相对于可视页面

​ 2.定位后释放空间

avatar
文章
阅读
粉丝