css之浮动

最新推荐文章于 2024-07-26 08:00:00 发布

aa147258aa147

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量117

点赞数

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

本文链接：https://blog.csdn.net/aa147258aa147/article/details/127596686

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.为什么需要浮动

许多div块级元素独占一行,有时候需要把这些块级元素并排显示,所以要用到浮动

浮动的排列特性

            float: left;左浮动
            float: right;右浮动

2.为什么清除浮动

清除浮动是为了让浮动占位置

1可以让子盒子撑开父盒子

2底下可以正常放标准流的盒子

不清除，以上两点就无法同时做到

3.两种清除浮动的方法

3.1clear清除浮动

.在同级最后的地方+clear的盒子3.浮动完成写清除浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .clear {
            clear: both;
        }  这里
    </style>
</head>

<body>
   <div class="c"> 这是父盒子
    <div class="a"></div>
    <div class="b"></div>
    <div class="clear"></div>   这里
   </div>
</body>

</html>

3.2伪元素清除浮动

.clear:after

给父级元素添加一个叫clear的类名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .clear:after {
            display: block;
            content: "";
            height: 0;
            clear: both;
        }  这里
    </style>
</head>

<body>
    <div class="c clear"> 给父级元素添加一个叫clear的类名
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>

</html>