前端中浮动布局注意点

最新推荐文章于 2024-08-03 17:33:50 发布

黄丫丫07

最新推荐文章于 2024-08-03 17:33:50 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/m0_51495354/article/details/127834359

版权

浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

<!DOCTYPE html>

<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>

        .box1 {

            width: 300px;

            height: 200px;

            background-color: aquamarine;

        }



        .box2 {

            width: 100px;

            height: 150px;

            background-color: aqua;

        }



        .box3 {

            float: left;

            width: 80px;

            height: 50px;

            background-color: blue;

        }



        .box4 {

            width: 90px;

            height: 80px;

            background-color: pink;

        }

    </style>

</head>



<body>

    <div class="box1">

        <div class="box2"></div>

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

        <div class="box4"></div>

    </div>



</body>



</html>

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

<!DOCTYPE html>

<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>

        .box1 {

            width: 300px;

            height: 200px;

            background-color: aquamarine;

        }



        .box2 {

            float: left;

            width: 100px;

            height: 50px;

            background-color: aqua;

        }



        .box3 {



            width: 80px;

            height: 60px;

            background-color: blue;

        }



        .box4 {

            float: left;

            width: 90px;

            height: 80px;

            background-color: pink;

        }

    </style>

</head>



<body>

    <div class="box1">

        <div class="box2"></div>

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

        <div class="box4"></div>

    </div>



</body>



</html>