CSS基础之浮动

拄着拐儿唱儿歌

已于 2022-04-15 15:40:19 修改

阅读量168

点赞数

分类专栏： # HTML+CSS 文章标签： css css3 html 前端

于 2022-04-13 16:46:51 首次发布

本文链接：https://blog.csdn.net/qq_43615148/article/details/124150450

版权

HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

浮动

一、浮动的作用

1、文字环绕效果

在这里插入图片描述

2、网页布局：让垂直布局的盒子可以无缝连接的水平布局。

当然切换盒子的显示模式也是可以完成的，但是切换显示模式的情况下，如果你的代码换行了，两个盒子之间就会被浏览器添加一个空格。效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
            width: 200px;
            height: 200px;
        }
        .one{
            background-color: pink;
        }
        .two{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>

</body>
</html>

在这里插入图片描述

如果用浮动就不会出现这种效果了

div{
    width: 200px;
    height: 200px;
}
.one{
    float: left;
    background-color: pink;
}
.two{
    float: left;
    background-color: skyblue;
}

在这里插入图片描述

也可以实现左边一个右边一个，一个左浮动一个右浮动就可以了。

在这里插入图片描述

注意：

浮动元素不能通过text-align:center或者margin:0 auto 居中

二、清除浮动

子元素浮动后，会脱离标准流，也就是不占位置，当然也不会撑满标准流的父级元素。
例如在一个列表后面，因为列表中的内容数量可能是不固定的，这时候就没法给固定的高，这时候如果列表使用了浮动，列表后面的东西就会被压在列表的下面，这时候就需要清除浮动带来的影响。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 600px;
            height: 800px;
            background-color: pink;
            box-sizing: border-box;
        }
        .one ul{
            list-style: none;
        }
        .one li{
            float: left;
            width: 200px;
            height: 50px;
            margin-top: 20px;
            background-color: skyblue;
        }
        .one li:nth-child(2n + 1){
            margin-right: 20px;
        }
        .two{
            height: 200px;
            background-color: green;
        }
        
    </style>
</head>
<body>
    <div class="one">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="two">

        </div>
    </div>
    
</body>
</html>

效果

在这里插入图片描述

网上有多种清除方法这边推荐使用双伪元素清除法：

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
}
.clearfix:after {
    clear:both;
}

直接给那些影响正常排版的浮动标签用上就行
在这里插入图片描述
使用后效果：

拄着拐儿唱儿歌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录