CSS——布局规则之浮动（开发重点）

最新推荐文章于 2024-09-14 15:26:51 发布

无所畏惧的man

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量261

点赞数

文章标签： html css3 html5 css

本文链接：https://blog.csdn.net/pipihan21/article/details/104882932

版权

浮动应用场景

文字环绕
横向排列

浮动的基本特点

修改float属性值为：

left：左浮动，元素排列靠上靠左
right：有浮动，元素排列靠上靠右

float的默认值为none

当一个元素浮动后，元素必定为块盒（更改display属性为block，行盒被设置为浮动后，display会变为block）
浮动元素的包含块和常规流一样，为父元素的内容盒

盒子尺寸

宽度为auto时，适应内容宽度(注意区分常规流，常规流为auto时width会自动撑满)
高度为auto时，与常规流一致，适应内容的高度
margin为auto时，为0
边框、内边距、百分比设置与常规流一致

盒子排列

左浮动的盒子靠上靠左排列
有浮动的盒子靠上靠右排列
浮动盒子在包含快中排列时，会避开常规流块盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        height: 500px;
        width: 500px;
        background-color: blanchedalmond;
    }
    .container .item{
        width: 50px;
        height: 50px;
        background-color: blue;
        float: left;
    }
</style>
<body>
    <div class="container">
        <div class="block">0</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

常规流块盒在排列时，无视浮动盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        height: 500px;
        width: 500px;
        background-color: blanchedalmond;
    }
    .container .item{
        width: 50px;
        height: 50px;
        background-color: blue;
        float: left;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div>0</div>
    </div>
</body>
</html>

行盒在排列时，会避开浮动盒子

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

文字环绕
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img{
        width: 200px;
        height: 200px;
        float: left;
        margin-right:50px;
        margin-bottom: 50px;
    }
</style>
<body>
   <img src="./常规流实战开发设计稿.png" alt="设计稿">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo minus dolorum placeat mollitia eveniet eos corrupti eaque doloribus fugiat, obcaecati, modi officia vero fuga ratione optio quia ex voluptate blanditiis molestiae sequi nisi voluptatibus non nobis accusantium. Cumque quam quasi nesciunt, voluptatem voluptate eos sed tempora explicabo. Impedit tempore necessitatibus reiciendis architecto, debitis minima voluptate quasi eos consequatur quia quo saepe vitae fugiat esse, doloribus similique modi sit neque dolores tenetur nemo. Deleniti ullam adipisci officiis, culpa atque autem, quod at id cupiditate provident eos harum suscipit voluptas placeat. Odit sapiente doloremque quaerat saepe voluptatum velit quam alias temporibus placeat modi laudantium ut mollitia reiciendis nam hic numquam reprehenderit, debitis similique! Necessitatibus laborum nisi obcaecati molestias magni sit, nihil minima rerum amet earum eligendi esse odit consectetur corporis? Dolorem quia corrupti maxime similique nobis inventore natus ipsa, ipsum incidunt minus in, eum impedit, voluptate porro tempore consequatur. Iste eos quibusdam debitis rerum, atque suscipit hic veniam alias dolore, exercitationem, culpa repellat inventore aspernatur in molestias corrupti explicabo totam itaque! Sit quis molestias dicta in, quo repellendus praesentium eum ex natus itaque. Minus beatae nesciunt culpa id consequatur. Molestiae, in minus iusto modi quos odit cupiditate ut laboriosam labore repellat quaerat animi amet reprehenderit rem vero rerum doloremque illo quisquam. Tempora temporibus in doloribus culpa omnis sit tenetur laboriosam debitis obcaecati ea labore perferendis magni consectetur, quis ut incidunt asperiores aperiam sapiente eius tempore atque id. Aspernatur aut blanditiis nulla saepe doloremque facere ratione asperiores facilis. Mollitia dolore consequatur cupiditate explicabo sequi non soluta sit ullam nobis quasi rem, architecto neque dolor assumenda molestias eaque inventore doloremque ea ipsum voluptate earum incidunt praesentium a illo. Iure, debitis quis! Earum tempora sunt consequatur sed omnis cum nobis sint unde autem provident laudantium hic, at necessitatibus repellat quia a. Corrupti temporibus voluptatibus illum cupiditate alias vero. Modi nesciunt iusto cupiditate eveniet sapiente consequuntur corrupti provident laboriosam omnis unde perferendis molestiae sunt tenetur eum expedita, asperiores beatae minus? Illo voluptatum, eos aperiam praesentium harum quidem commodi accusantium ad, culpa sit ut nam distinctio aspernatur illum ex possimus accusamus blanditiis nobis voluptas impedit officiis? Maxime omnis qui quidem in! Alias commodi esse, debitis sapiente necessitatibus saepe impedit ducimus quas aliquam distinctio voluptas itaque, deleniti laboriosam dolorem illum voluptatibus eaque nostrum dignissimos repellat quod illo laudantium! Cumque consectetur mollitia aut, eos corporis quisquam est vel officiis, voluptate provident soluta obcaecati nisi recusandae veritatis quaerat ex? Modi dicta earum quibusdam amet accusantium officiis excepturi quaerat magnam provident minus voluptatum aspernatur ab labore velit hic incidunt nesciunt, repellat fuga, voluptatem voluptate, perspiciatis ipsum blanditiis eum! Fuga cupiditate corporis voluptatem, sed, tenetur reprehenderit alias exercitationem nihil, sit nam temporibus! Quibusdam cum est delectus quae animi ipsam maiores nobis voluptates veniam, pariatur vitae expedita quia fugit soluta, odio corporis totam adipisci amet sit facere! Labore nobis in a reiciendis unde molestias, earum saepe cum beatae tempore blanditiis, consectetur necessitatibus totam doloremque odio alias hic corporis rem libero? Magni fuga voluptates tempora saepe dolore esse ut, quod deserunt repellendus ratione ducimus.
    </p>
</body>
</html>

外边距不会发生合并

高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

这里可用CSS属性clear来清除浮动

默认值：none
left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有有浮动盒子的下方
both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

解决方法①
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        background-color: blanchedalmond;
    }
    .container .item{
        width: 50px;
        height: 50px;
        background-color: blue;
        float: left;
    }
    .container .clear{
        clear: both;
        background-color: cadetblue;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="clear">21241</div>
    </div>
</body>
</html>

解决方法②
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        background-color:sandybrown;
    }
    .container .item{
        width: 50px;
        height: 50px;
        background-color: blue;
        float: left;
    }
    .container::after{
        content: "12345";
        display: block;
        clear: both;
        background-color: slateblue;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>