CSS--盒模型浮动与清除浮动_盒子模型取消浮动-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_85545586/article/details/142959341

CSS浮动（float）是一种CSS属性，用于定位元素。设置浮动后，元素会在父元素中横向浮动，并且会影响其他元素的布局。

特点

浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动
任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行

浮动定位

将元素排除在普通流之外
元素将不在页面中占据空间
将浮动元素放置在包含框的左边或者右边
•浮动元素依旧位于包含概之内
浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止

语法：float:none/left/right;

浮动元素可以向左或向右浮动，取决于float属性的值。可以使用以下代码设置元素的浮动位置：

float: left;    // 元素向左浮动
float: right;   // 元素向右浮动

在浮动元素之后的元素会紧跟着浮动元素的位置，形成流动布局。浮动元素会尽可能地占据父元素的宽度，直到碰到其他浮动元素或者父元素的边界。

举例子：

普通文档流

运行代码：

 <style>
        article{
            width: 500px;
            height: 600px;
            background-color: gray;
            margin-bottom: 5px;
        }
    div{
            width: 100px;
            height: 100px;
            margin-bottom: 5px;
         
        }
        #div2{
            background-color: red;
           /* float: left;*/
        }

        #div3{
            background-color: yellow;
           /*  float: left;*/
            
        }
        #div4{
            background-color: blue;
           /*  float: left;*/
            
        }

      
    </style>
</head>
<body>
    <article>
    <div id="div2">1</div>
    <div  id="div3">2</div>
    <div id="div4">3</div>
</article>
</body>
</html>

浮动（从左到右）

运行代码:

 <style>
        article{
            width: 500px;
            height: 600px;
            background-color: gray;
            margin-bottom: 5px;
        }
    div{
            width: 100px;
            height: 100px;
            margin-bottom: 5px;
         
        }
        #div2{
            background-color: red;
            float: left;
        }

        #div3{
            background-color: yellow;
            float: left;
            
        }
        #div4{
            background-color: blue;
            float: left;
            
        }

      
    </style>
</head>
<body>
    <article>
    <div id="div2">1</div>
    <div  id="div3">2</div>
    <div id="div4">3</div>
</article>
</body>
</html>

运行结果：

若空间无法容纳，则下移

运行代码：

  <style>
        article{
            width: 500px;
            height: 600px;
            background-color: gray;
            margin-bottom: 5px;
        }
    div{
            width: 100px;
            height: 100px;
            margin-bottom: 5px;
         
        }
        #div2{
            background-color: red;
            float: left;
        }

        #div3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
            
        }
        #div4{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
            
        }
        #div5{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
            
        }

      
    </style>
</head>
<body>
    <article>
    <div id="div2">1</div>
    <div  id="div3">2</div>
    <div  id="div4">3</div>
    <div id="div5">4</div>
</article>
</body>
</html>

浮动元素不会占据页面空间

运行代码：

 <style>
        article{
            width: 500px;
            height: 600px;
            background-color: gray;
            margin-bottom: 5px;
        }
    div{
            width: 100px;
            height: 100px;
            margin-bottom: 5px;
         
        }
        #div2{
            background-color: red;
            float: left;
        }

        #div3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
            
        }
        #div4{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
            
        }
        #div5{
            width: 100px;
            height: 200px;
            background-color: green;
          border: 10px black solid;
            
        }

      
    </style>
</head>
<body>
    <article>
    <div id="div2">1</div>
    <div  id="div3">2</div>
    <div  id="div4">3</div>
    <div id="div5">4</div>
</article>
</body>
</html>

清除浮动

语法格式：

clear:none | left | right | both

浮动元素可以使用clear属性清除浮动。使用clear属性可以防止其他元素紧跟浮动元素的位置。常用的clear属性值包括：

clear: left;    // 清除左侧浮动元素
clear: right;   // 清除右侧浮动元素
clear: both;    // 清除所有浮动元素

浮动元素经常与其他CSS属性一起使用，如width、height、margin、padding等，以实现更复杂的布局效果。

未清除浮动时文字围绕着盒子

运行代码：

  <style>
        article{
            width: 600px;
            height: 600px;
            background-color: gray;
            margin-bottom: 5px;
        }
    div{
            width: 100px;
            height: 100px;
           
         
        }
        #div1{
            background-color: red;
            float: left;
        }

        #div2{
          
            background-color: yellow;
            float: left;
            
        }
        #div3{
           
            background-color: blue;
            float: right;
         
        }
       
      
    </style>
</head>
<body>
    <article>
    <div id="div1">1</div>
    <div  id="div2">2</div>
    <div  id="div3">3</div>
    <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
        我是文字我是文字我是文字我是文字我是文字我是文字我是文 
        我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
        我是文字我是文字我是文字我是文字我是文字我是文字我是文

    </p>
</article>
</body>
</html>

清除浮动

运行代码：

<style>
        article{
            width: 600px;
            height: 600px;
            background-color: gray;
            margin-bottom: 5px;
        }
    div{
            width: 100px;
            height: 100px;
           
         
        }
        #div1{
            background-color: red;
            float: left;
        }

        #div2{
          
            background-color: yellow;
            float: left;
            
        }
        #div3{
           
            background-color: blue;
            float: right;
        }
       #p{
        clear: left;
       }
      
    </style>
</head>
<body>
    <article>
    <div id="div1">1</div>
    <div  id="div2">2</div>
    <div  id="div3">3</div>
    <p style="clear: left;">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
        我是文字我是文字我是文字我是文字我是文字我是文字我是文 
        我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
        我是文字我是文字我是文字我是文字我是文字我是文字我是文

    
            
    </p>
</article>
</body>
</html>