css浮动和高度塌陷问题的解决方法_css 向左浮动高度不一致问题-优快云博客

本文链接：https://blog.youkuaiyun.com/2402_82646957/article/details/143455252

浮动

什么是浮动

CSS 中的浮动（Float）是一种布局技术，它允许元素脱离常规文档流，向左或向右移动，直到其外边缘碰到包含框或另一个浮动元素的边缘。浮动常用于文本环绕图像的场景，但也可以用于创建复杂的布局。

浮动属性

float: left;：元素向左浮动。
float: right;：元素向右浮动。
float: none;：默认值，元素不浮动。
float: inherit;：元素继承其父元素的浮动值

浮动演示

浮动前

浮动后

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


    <!doctype html>
    <!--声明文档类型，告诉浏览器使用HTML5标准来渲染页面。-->
    <html>

    <head>
        <style>
            article{
                width: 600px;
                height: 600px;
                background-color: #000000;
                margin: 5px 0px;
            }
            div{
                width: 200px;
                height: 100px;
                background-color: #ff00ba;
                margin: 5px;

            }
            #div2{
                background-color: red;
                float: left;
            }
            #div3{
                background-color: green;
                float: left;
            }
            #div4{
                background-color: blue;
                float: left;
            }
        </style>
    </head>
    <!-- 盒子浮动后，会生成一个与父盒等宽的浮层 -->
    <body>
    <article>
        <div>1</div>
        <div id="div2">2（浮动）</div>
        <div id="div3">3（浮动）</div>
        <div id="div4">4（浮动）</div>
        <div>5</div>
    </article>
    </body>
    </html>

浮动的规则

向上向左或向上向右排列
若空间无法容纳,则先向下移动,直到高度足够后再向左向右移动
当前浮动盒的顶边,不得高于上一个浮动盒的顶边

清除浮动

浮动元素会脱离常规文档流，这可能导致包含它们的父元素高度塌陷。为了解决这个问题，可以使用 clear 属性：

clear: left;：元素下方不能有左浮动元素。
clear: right;：元素下方不能有右浮动元素。
clear: both;：元素下方不能有左或右浮动元素。
clear: none;：默认值，允许浮动元素旁边有元素

清除前

清除后

代码

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


    <!doctype html>
    <!--声明文档类型，告诉浏览器使用HTML5标准来渲染页面。-->
    <html>

    <head>
        <style>
            article{
                width: 600px;
                height: 600px;
                background-color: #b9b9b9;
                margin: 5px 0px;
            }
            div{
                width: 200px;
                height: 100px;
                background-color: #ff00ba;
                margin: 5px;

            }
            #div2{
                background-color: red;
                float: left;
            }
            #div3{
                background-color: green;
                float: left;
            }
            #div4{
                background-color: blue;
                clear: both;
            }
        </style>
    </head>
    <!-- 盒子浮动后，会生成一个与父盒等宽的浮层 -->
    <body>
    <article>
        <div>1</div>

        <div id="div2">2（浮动）</div>
        <div id="div4">我在这里</div>
        <div id="div3">3（浮动）</div>




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