CSS-浮动

最新推荐文章于 2024-09-14 17:04:32 发布

Johaden

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量362

点赞数 7

分类专栏：前端自学笔记文章标签： css 前端

本文链接：https://blog.csdn.net/Johaden/article/details/139269352

版权

前端自学笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.网页布局方式：“把盒子摆到合适的位置”

①标准流（普通流、文档流）：网页按照元素的书写顺序依次排列。是由块级元素和行内元素按照默认规定方式排列，块就占一行，行内元素就是一行放好多个元素。

②浮动

③定位

④Flexbox和Grid（自适应布局）：实际开发中通常是多个布局方式掺杂一起开发的，该方法可以更轻松实现复杂的自适应布局。如在手机端和电脑端访问，提供更灵活的布局选项，使页面在不同设备上可以自适应。

2.浮动：创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样可使元素进行浮动。

选择器{
        float:left/right/none；
}

PS：浮动相比于标准流，它可以改变元素默认的排列顺序，让网页布局更加灵活多变。它可以让多个块级元素在同一行内排列显示。浮动的元素是相互贴靠在一起的，无缝隙，若父级装不下一个新盒子则会另起一行；行内块元素彼此之间有缝隙，不如浮动方便。浮动是相对父元素浮动，只会在父元素的内部移动。

3.浮动的三大特性：

（1）脱标：脱离标准流。

（2）一行显示，顶部对齐。

（3）具备行内块元素的特性。

Tips：如果想设置宽高的话，可以使用w像素值+h像素值，如w100+h100+tab；

4.下面的代码时未设置浮动之前的，

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>浮动</title>

    <style>
        .father{
            background-color:aqua;
            height:150px;
        }
        .left-son{
            width:100px;
            height:100px;
            background-color:bisque;
        }
        .right-son {
            width:100px;
            height:100px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>

</body>
</html>

·所以上面的元素是按照标准流的形式排列的，一个父元素，两个字元素。现在给“左浮动”添加左浮动属性，给“右浮动”添加右浮动属性,修改部分如下，

        .left-son{
            width：100px;
            height:100px;
            background-color:bisque;
            float:left;
        }
        .right-son {
            width：100px;
            height: 100px;
            background-color:yellow;
            float:right;
        }

·现在多复制几个左浮动元素，发现它像行内块一样，先占满一行，然后拓展到下一行。

    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
    </div>

5.若父元素不设置高度，则背景颜色消失。若设置边框，则边框应该包裹所有元素，若此时去掉高度，则发现边框并没有包裹两个盒子。这是因为两个元素浮动，父元素出现坍塌，若想此时在父元素后面输入文本，它并没有出现在两个盒子下边，而是由于出现高度坍塌，导致文本出现在两个盒子之间。

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>浮动</title>

    <style>
        .father{
            background-color:aqua;

            border:3px solid green;
        }
        .left-son{
            width:100px;
            height:100px;
            background-color:bisque;
            float:left;
        }
        .right-son {
            width:100px;
            height: 100px;
            background-color:yellow;
            float:right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
    <p>这是一段文本</p>

</body>
</html>

此时我们就要学习如何清除浮动，否则后面的整体布局都会受到影响。

6.清除浮动

（1）在浮动元素的父元素中添加属性：overflow:hidden;

<style>
    .father{
        background-color:aqua;
        border:3px solid green;
        overflow:hidden;
    }
    .left-son{
        width：100px;
        height:100px;
        background-color:bisque;
        float:left;
    }
    .right-son {
        width：100px;
        height: 100px;
        background-color:yellow;
        float:right;
    }
</style>

（2）伪元素清除法：在浮动标签的父元素再添加一位元素（.father::after），部分代码如下

 <style>
     .father{
         background-color:aqua;
         height:150px;
         border:3px solid green;
     }
     .father::after{
         content:"";
         display:table;
         clear:both;
     }

     .left-son{
         width：100px;
         height:100px;
         background-color:bisque;
         float:left;
     }
     .right-son {
         width：100px;
         height: 100px;
         background-color:yellow;
         float:right;
     }
 </style>