CSS笔记(黑马程序员pink老师前端)浮动,清除浮动

最新推荐文章于 2024-09-11 22:31:16 发布

百变珍珑兽

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量482

点赞数

分类专栏： html+css+js 文章标签：前端 css 笔记

本文链接：https://blog.csdn.net/qq_43701213/article/details/132688745

版权

html+css+js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

浮动可以改变标签的默认排列方式。浮动元素常与标准流的父元素搭配使用.
网页布局第一准则:多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动特性

1.浮动元素会脱离标准流(脱标)
脱离标准普通流的控制,移动到指定位置,且浮动的盒子不再保留原先的位置
当为粉色div设置浮动后,其原有的位置空出,表现为压住了原来在其下方的蓝色div.
在这里插入图片描述
浮动元素只能影响在其后面的标准流
粉色div为标准流独占一行,蓝色div另起一行且浮起不占原有位置,绿色标准流div占据蓝色div的原有位置.

粉色浮动,蓝色标准流div占据其原有位置且独占一行,绿色浮动div另起一行浮动显示.
在这里插入图片描述

2.浮动的元素会一行内显示并且元素顶部对齐
若父级元素的宽度不够,则会自动换行,另起一行重新对齐排列.
在这里插入图片描述

3.浮动的元素会具有行内块元素的特性
任何元素都可以浮动,浮动的元素会具有行内块元素的特性.

清除浮动

由于父级盒子很多情况下，不方便给高度，最好由子元素撑开. 但是子盒子浮动又不占有位置，当不设置父级盒子高度时，就会影响下面的标准流盒子,所以需要清除浮动
在这里插入图片描述
1.额外标签法:浮动元素的末尾添加一个清除浮动的空标签(必须是块元素).

<div style="clear: both;"></div>

2.为父元素添加 overflow:hidden;(属性值为auto或者scroll也可) 缺点是无法显示溢出的部分
3.:after伪元素法,相当于额外标签法的升级版,在父元素里面的最后添加了一个空的块元素.优点是没有真的增加标签,结构简单.

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

4.双伪元素清除浮动,代码比伪元素法稍简洁.

<!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>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .top {
        width: 630px;
        background-color: pink;
        margin: 10px auto;
    }

    .top ul li {
        float: left;
        width: 150px;
        height: 240px;
        background-color: skyblue;

        margin-right: 10px;
        margin-bottom: 10px;
    }

    .top ul .last {
        margin-right: 0px;
    }

    .bottom {
        background-color: aquamarine;
        height: 40px;

    }

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

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        /* IE6,7专有 */
        *zoom: 1;
    }
</style>

<body>
    <div class="top clearfix">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="bottom"></div>
</body>

</html>