CSS盒子模型之清除浮动及例题_float: right;清除浮动-CSDN博客

本文链接：https://blog.csdn.net/lxnyttkx/article/details/148383946

一、含义

在页面布局时，浮动属性的确能帮助用户实现良好的布局效果，但如果使用不当就会导致页面出现错位的现象。为了防止浮动溢出现象的出现而进行的CSS处理，叫作清除浮动。在CSS样式中，浮动与清除浮动是相互对立的，使用清除浮动不仅能够解决页面错位的现象，还能解决子级元素浮动导致父级元素背景无法自适应子级元素高度的问题。

其语法格式为：

clear : none | left | right | both

二、具体介绍

（一）clear: both

该盒子必须出现在所有左浮动和右浮动盒子的下方。如果前方有浮动盒子，浏览器会将该盒子下推到浮动盒子的最底部。进而强制父盒子重新计算高度，直到高度能包裹所有浮动盒。

（二）clear: left

该盒子必须出现在所有左浮动盒子的下方。如果前方有左浮动盒子，浏览器会将该盒子下推到所有左浮动盒子的最底部。进而强制父盒子重新计算高度，直到高度能包裹所有左浮动盒。

（三）clear: right

该盒子必须出现在所有右浮动盒子的下方。如果前方有右浮动盒子，浏览器会将该盒子下推到所有右浮动盒子的最底部。进而强制父盒子重新计算高度，直到高度能包裹所有右浮动盒。

三、例题

题目：编写一个清除浮动的例子

代码示例：

<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>清除浮动</title>
    <style>
        article{
        
            background-color: aqua;
           
        }
        #a1{
            width: 50px;
            height: 40px;
            background-color: rgb(68, 0, 255);
            border: 5px black solid ;
            float: left;
        }
        #a2{
            width: 50px;
            height: 40px;
            background-color:red;
            border: 5px black solid;
            float: left;
        }
        #a3{
            width: 50px;
            height: 40px;
            background-color:green;
            border: 5px black solid;
            float: left;
        }
        #a4{
            width: 50px;
            height: 80px;
            background-color:blueviolet;
            border: 5px black solid;
            float: right;
        }
        #a5{
            height: 0px;
            background-color: yellow;
            clear: right;
        }
    </style>
</head>
<body>
    <article>
    <div id="a1">盒子1</div>
    <div id="a2">盒子2</div>
    <div id="a3">盒子3</div>
    <div id="a4">盒子4</div>
    <div id="a5">盒子5</div>
    </article>
</body>
</html>

运行结果：

清除浮动前：