CSS基础学习——浮动float、盒子模型

最新推荐文章于 2025-03-08 22:11:02 发布

梦起孟心

最新推荐文章于 2025-03-08 22:11:02 发布

阅读量932

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/qq_41890177/article/details/107463532

版权

CSS 专栏收录该内容

9 篇文章

订阅专栏

一、浮动

1、什么是浮动？

浮动（float）就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。

2、浮动的原理

就是让元素脱离文档流，不占用标准流。

3、浮动的属性

float:left：左浮动

float:right：右浮动

float:none：默认值，不浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #666;
        }
        .box1,.box2{
            width: 200px;
            height: 150px;
        }
        .box1{
            background-color: #ff0000;
        }
        .box2{
            background-color: #217aff;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>
</html>

先看一下原来的效果，现在可以添加浮动属性来查看

.box2{
   background-color: #217aff;
   float: right;
}

再给box1添加浮动属性

.box1{
    background-color: #ff0000;
    float: left;
}

可以看到，当添加玩浮动后，元素块也会进行移动，之前在原理处也讲过，浮动就是元素脱离文档流，不占用标准流。

如果此时再添加一个box效果又会如何：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #666;
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 150px;
        }
        .box1{
            background-color: #ff0000;
            float: left;
        }
        .box2{
            background-color: #217aff;
            float: right;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">box1</div><!--这里的div属于块级标签，会独占一行-->
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
</body>
</html>

可以看到，浮动后，后面的元素不管是块级还是行级元素，都不会显示在下一行，为了避免这一情况的发生，我们可以清除浮动

4、清除浮动

目的：让后面的元素自动掉到下一行。

（1）添加空标签，并设置样式
clear:left; 清除左浮动
clear:right; 清除右浮动
clear:both; 清除左右浮动
clear:none; 左右浮动都不清除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #666;
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 150px;
        }
        .box1{
            background-color: #ff0000;
            float: left;
        }
        .box2{
            background-color: #217aff;
            float: right;
        }
        .clear{
            clear: both; 
        }
        .box3 {
            background-color: #58ff62;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="clear"></div>
        <div class="box3">box3</div>
    </div>


</body>
</html>

（2）在要清除浮动的父级添加样式：overflow:hidden;

overflow:hidden; 超出部分隐藏，也可以用来实现清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            .wrapper{
                width: 600px;
                margin: 0 auto;
                border: 1px solid #666;
                overflow: hidden;
            }
            .box1,.box2,.box3{
                width: 200px;
                height: 150px;
            }
            .box1{
                background-color: #ff0000;
                float: left;
            }
            .box2{
                background-color: #217aff;
                float: right;
            }
            .box3 {
                background-color: #58ff62;
            }
        </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>

</div>
    <div class="box3">box3</div>
</body>
</html>

此时需要的是将box3的div移出来，不要放在wrapper下，至于box3为什么不在box1下，也是因为box3不在wrapper下，所以个wrapper设置的样式，就不在box3身上显示

（3）在要清除浮动的父级添加伪元素，并设定样式：

父元素:after{
content:"";
display: block;
clear:both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrapper{
                width: 600px;
                margin: 0 auto;
                border: 1px solid #666;
            }

            .wrapper:after{
                content:"";
                display: block;
                clear:both;
            }

            .box1,.box2,.box3{
                width: 200px;
                height: 150px;
            }
            .box1{
                background-color: #ff0000;
                float: left;
            }
            .box2{
                background-color: #217aff;
                float: right;
            }
            .box3 {
                background-color: #58ff62;
            }
        </style>
    </head>



<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>

</div>
    <div class="box3">box3</div>
</body>
</html>