CSS 浮动

最新推荐文章于 2023-03-25 16:12:57 发布

qq_50636169

最新推荐文章于 2023-03-25 16:12:57 发布

阅读量66

点赞数 2

本文链接：https://blog.csdn.net/qq_50636169/article/details/119086202

版权

传统网页有三种布局方式，分别是普通流、浮动、定位。其中普通流是指将标签按照规定好的默认方式排列。接下来我们来简单介绍一下浮动。

浮动（float)

浮动可以改变元素标签默认的排列方式，最初的目的是为了做文字环绕效果，其最典型的应用：可以让多个块级元素一行内排列显示。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一浮动框的边缘。

选择器 {
       float: 属性值；}
       属性值：none:不浮动
              left:向左浮动
              right:向右浮动

浮动的特性：

浮动的元素会脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

设置了float的元素的最重要的特性：
1.脱离普通标准流的控制从而移动到指定位置
2.浮动的盒子不在保留原先的位置

<style>

        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(162, 0, 255);
        }
    </style>
</head>
<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

注意：浮动的元素是相互贴在一起的，如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行。

浮动的元素具有行内块元素的特点：

<style>
        /* 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 */
        span,
        div {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        /* 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度 */
        p {
            float: right;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <span>1</span>
    <span>2</span>

    <div>box1</div>
    <p>box2</p>
 <body>

浮动元素与标准父级流搭配使用
先用标准流的父元素排列上下位置，之后里面的子元素采用浮动排列左右位置。

 <style>
        .box {
            margin: 0 auto;
            width: 1200px;
            height: 400px;
            background-color: yellow;
        }

        .left {
            float: left;
            width: 300px;
            height: 400px;
            background-color: pink;
        }

        .right {
            float: left;
            width: 300px;
            height: 3000px;
            background-color: blue;
        }
    </style>
</head>

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

浮动布局注意事项：
1.如果一个元素浮动了，理论上其余兄弟元素也要浮动（一浮全浮）。
2.浮动的盒子只能影响后面的标准流，不会影响前面的标准流。

清除浮动

由于父盒子在很多情况下不方便给高度，但子盒子浮动之后不占有位置，最会会导致父级高度为零，从而会影响下面的标准流盒子。即子盒子浮动、脱标，父盒子没有高度就不会撑开盒子。这时就需要清除浮动元素造成的影响。


选择器 {
        clear: 属性
        }
        left:清除左侧浮动影响
        right:清除右侧浮动影响
        both: 清除左右两侧浮动影响

清除浮动的策略是：闭合浮动
方法是：

额外标签法（隔墙法）
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

1.额外标签法：
在浮动元素末尾添加一个空的标签（清除浮动样式）

 <div class="box">
        <div class="box1">语文</div>
        <div class="box2">数学</div>
        <div class="box3">英语</div>
        <div class="box4">政治</div>
        <div class="box5">地理</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>

容易理解但添加了许多无意义的标签

2.添加父级overflow:hidden/scroll/auto
代码简单，但无法显示溢出的部分

3.父级添加after伪元素

 .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
         .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

没有增加标签，结构更简单

4.父级添加双伪元素

.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

qq_50636169

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 浮动

传统网页有三种布局方式，分别是普通流、浮动、定位。其中普通流是指将标签按照规定好的默认方式排列。接下来我们来简单介绍一下浮动。浮动（float)浮动可以改变元素标签默认的排列方式，最初的目的是为了做文字环绕效果，其最典型的应用：可以让多个块级元素一行内排列显示。float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一浮动框的边缘。选择器 { float: 属性值；} 属性值：none:不浮动 left:向左浮动
复制链接

扫一扫