CSS浮动(涉及到清除浮动)及易忽略的点

Running&Lover的博客

已于 2022-02-28 09:46:34 修改

阅读量320

点赞数 1

分类专栏： CSS 文章标签： css css3 html

于 2022-02-26 23:14:18 首次发布

本文链接：https://blog.csdn.net/m0_49662897/article/details/123156488

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

浮动float：

1.传统网页布局的三种方式：

普通流(标准流)：标签按照默认方式进行排列，像块状元素（独占一行），从上向下顺序排列，eg:div,p标签。行内元素，从左到右顺序排列，像span，a，i标签。
浮动
定位

2.为什么需要浮动？
我们用标准流能方便的实现如下效果么？
(1)如何让多个块级盒子水平排列成一行？
在这里插入图片描述
比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制，效果如下。

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>div</div>
    <div>div</div>
    <div>div</div>
</body>

在这里插入图片描述
总结：有很多的布局效果，标准流没法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式
浮动最典型的应用：就是可以让多个块级元素一行内排列显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

浮动特性(重难点)：

加了浮动之后的元素，会有许多特性：

浮动元素会脱离标准流(脱标)，即浮动的盒子不再保留原先的位置，浮起来之后其他元素会占用它的位置，eg:案例一
浮动元素会一行内显示并且元素顶部对齐排列(注意：浮动的元素是互相贴靠在一起的（不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐)
浮动元素会具有行内块元素的特性。eg：案例二

还是简单的写一个小案例加深一下记忆吧：
案例一：

 <style>
        .box1 {
        	/* float: left; */
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box2 {
            width: 200px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
</body>

效果图：
在这里插入图片描述
给第一个盒子设置浮动后，失去标准流：第二个盒子会把第一个盒子原来的位置所占用

在这里插入图片描述
案例二：
1.我们不难看出本来span是行内元素，此时因为浮动，不需要转换为块级元素，直接给出高度和宽度即可

 <style>
        /* 任何元素都可以浮动，不管原先是什么类型的元素，添加浮动后具有行内块元素相似的特性 */
        /* 如果行内元素有了浮动，则不需要转换为块级，行内块元素就可以给高度和宽度 */
        span,div {
           float: left;
           width: 200px;
           height: 100px;
           background-color: pink;
       }

       p {
           height: 200px;
           background-color: purple;
       }
    </style>
</head>
<body>
    <span>1</span>
    <span>2</span>
    <div>div</div>
    <p>p</p>
</body>

效果：
在这里插入图片描述
2.p元素由于设置为浮动，拥有了行内块元素的特点，没有设置宽度的条件下，宽度根据内容的多少来变化，内容多时，会自动把盒子撑开

 <style>
        /* 任何元素都可以浮动，不管原先是什么类型的元素，添加浮动后具有行内块元素相似的特性 */
        /* 如果行内元素有了浮动，则不需要转换为块级，行内块元素就可以给高度和宽度 */
        span,div {
           float: left;
           width: 200px;
           height: 100px;
           background-color: pink;
       }

       p {
           float: right;
           height: 200px;
           background-color: purple;
       }
    </style>
</head>
<body>
    <span>1</span>
    <span>2</span>
    <div>div</div>
    <p>pppppppp</p>
</body>

效果图：
在这里插入图片描述

浮动元素经常和标准流父级搭配使用：

为了约束浮动元素的位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，，之后内部的子元素采取浮动排列左右位置，符合网页布局的第一准则，原理如下图：（蓝色的为标准流父盒子）
在这里插入图片描述
还是简单写一个案例加深一下理解：

 <style>
        .box {
            width: 600px;
            height: 260px;
            background-color: pink;
            margin: 0 auto;
        }
        .left {
            /* float: left; */
            width: 200px;
            height: 260px;
            background-color: purple;
        }
        .right {
            /* float: left; */
            width: 400px;
            height: 260px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>

</body>

左侧和右侧盒子都未设浮动时，效果如图所示：
在这里插入图片描述
左侧盒子设置浮动，右侧盒子未设置浮动，效果如下图：

左侧和右侧都设置浮动，效果如下图：

总结：

当左右两侧的盒子都未设置浮动时，遵循标准流的排列，左侧子盒子和右侧子盒子都属于div块级元素，独占一行，并且标准流父盒子高度不够，所以右侧盒子会脱离父盒子在下一行单独显示
当左侧设置浮动，右侧未设置浮动时，左侧盒子由于浮动脱离原来的文档流，右侧盒子就会占用左侧盒子原来的位置，右侧盒子宽度一共400px，一半被左侧盒子遮挡，一半显露在外面，剩余的200px就是标准流父盒子的200px
当左侧设置浮动，右侧也设置浮动时，此时左右侧盒子都会脱离原来的文档流，此时左右侧盒子由于在同一级上，不存在遮挡的情况，此时就会铺满整个标准流父盒子

注：以上是用来布局盒子间无缝隙的情况

下面写一个盒子间有缝隙的小案例：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }
        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

效果图：
在这里插入图片描述
分析上述结果的原因：由于给每一个盒子都设置了右外边距，而最后一个盒子是不需要外边距的，所以最后一个盒子的外边距导致父盒子装不下，所以应该对最后一个盒子的外边距做单独处理

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 权重为11 */
        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }
        /* 权重为10，无法覆盖掉上面的右外边距，需要用下面的写法*/
        /* .last {
            margin-right: 0;
        } */
        /* 权重为11，会覆盖掉上面的右外边距 */
        .box .last {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

效果如下：
在这里插入图片描述
注意：需要注意权重的问题，不然设置的属性无法生效

浮动布局两个注意的点：

浮动和标准流的父盒子搭配(先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右的位置)
一个元素浮动了，理论上其余的兄弟元素也要浮动。

注意：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流，如下面的例子：

还是简单写一下小案例加深一下记忆：

<style>
       .box {
           width: 900px;
           height: 300px;
           background-color: pink;
           margin: 0 auto;
       }
       .box1 {
           width: 200px;
           height: 200px;
           background-color: purple;
       }
       .box2 {
           float: left;
           width: 200px;
           height: 150px;
           background-color: red;
       }
       .box3 {
           width: 300px;
           height: 240px;
           background-color: blue;
       }
   </style>
</head>
<body>
   <div class="box">
       <div class="box1">盒子一</div>
       <div class="box2">盒子二</div>
       <div class="box3">盒子三</div>
   </div>
</body>