CSS三大特性

盒子模型

内边距(padding)

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

如果需要子标签和父标签同样宽/高，子标签可以不用特意设置width/height，不然padding会在原有的宽度上再将盒子撑开。

外边距(margin)

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

属性作用
margin-top上外边距
margin-bottom下外边距
margin-ledt左外边距
margin-right右外边距
外边距简写

magin简写方式代表的意义跟padding完全一致，可以有一到四个值，参数值顺序是顺时钟顺序(上右下左)。

值的个数表达意思
margin:5px;1个值，代表上下左右都有5个像素的外边距；
margin:5px 10px;2个值，代表上下外边距5像素，左右外边距10像素；
margin:5px 10px 20px;3个值，代表上外边距5像素，左右外边距10像素，下外边距20像素；
margin:5px 10px 20px 30px;4个值，代表上5像素，右10像素，下20像素，左30像素，顺时针；

以上四种情况，在实际开发都会遇到，都要记住！！！

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件

  1. 盒子必须指定了宽度(width)
  2. 盒子左右的外边距都设置为auto
.header{width:960px; margin:0 auto;}

常见的写法，以下三种都可以

  1. margin-left:auto; margin-right:auto;意思是：左右外边距auto(即居中)
  2. margin:auto;意思是：上下左右外边距都是auto，即水平居中和垂直居中
  3. margin:0 auto意思是：上下外边距为0，左右外边距auto(即居中)

注意：以上方法是让块级元素水平居中，行内元素或行内块元素水平居中给其父元素添加text-align:center;即可

外边距合并

使用margin定义元素块的垂直外边距时，可能会出现外边距的合并。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

<style>
    .father{
        width: 300px;
        height: 300px;
        background-color: skyblue;
        margin-top: 50px;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 100px;
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

上面的代码上外边距为100px，因为父元素塌陷了，取了最大的外边距值，也就是.son的margin-top值。

解决方案：

  1. 可以为父元素定义一个1像素的外边框(会撑开盒子)。

    • 代码：border: 1px solid red;如果需要边框透明可以把red修改为transparent

  2. 可以为父元素定义一个1像素的上内边距(会撑开盒子)。

    • 代码：padding: 1px;
  3. 可以为父元素添加overflow: hidden;属性(不会撑开盒子)。

还有其他方法也可以实现，比如：浮动、固定、绝对定位的盒子不会有他先问题。

清除内外边距

网页元素很多都带有默认的内外边距，而且不同的浏览器默认的内外边距数值也不一致。因此我们在布局前，首先要清除一下网页元素的内外边距。

通常情况下这也是我们CSS的第一行代码。

* {
    padding: 0;
    margin: 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了。

综合案例-小米热门产品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-产品模块</title>
    <style>
        * {
            /* 清除所有元素的内外边距 */
            padding: 0;
            margin: 0;
        }
        body {
            /* 页面的背景颜色 */
            background-color: #f5f5f5;
        }
        a {
            /* 标签的颜色 */
            color: #333;
            /* 删除标签的下划线 */
            text-decoration: none;
        }
        .box {
            width: 320px;
            height: 415px;
            /* 盒子背景颜色 */
            background-color: #fff;
            /* 上外边距100px 左右外边距auto,水平居中 */
            margin: 100px auto;
        }
        .box img {
            /* 让图片的宽度跟父元素box对齐，和父亲一样宽 */
            width: 100%;
        }
        .review {
            height: 70px;
            font-size: 14px;
            /* 设置左右内边距为28px */
            padding: 0 28px;
            /* 设置上下外边距为30px */
            margin-top: 30px;
        }
        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            /* 上外边距 */
            margin-top: 20px;
            /* 左右内边距 */
            padding: 0 28px;
        }
        .info {
            font-size: 14px;
            /* 上外边距 */
            margin-top: 15px;
            /* 左右内边距 */
            padding: 0 28px;
        }
        .info h4 {
            /* 转换为行内块元素 */
            display: inline-block;
            /* 字体不加粗 */
            font-weight: 400;
        }
        .info span {
            color: #ff6700;
        }
        .info em {
            /* 不倾斜 */
            font-style: normal;
            color: #ebe4e0;
            /* 右外边距6px 左外边距15px  */
            margin: 0 6px 0 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/2.jpg" alt=""> 
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力！</p>
        <div class="appraise">来自于 117384232 的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真蓝牙无线...</a></h4>
            <em>|</em>
            <span>99.99元</span>
        </div>
    </div>
</body>
</html>

自己尝试写其他的产品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己尝试做其它的商品布局</title>
    <style>
        * {
            /* 清除默认的内外边距 */
            padding: 0;
            margin: 0;
        }
        body {
            /* 设置页面的背景颜色 */
            background-color: #f5f5f5;
        }
        a {
            /* 取消a标签的下划线 */
            text-decoration: none;
        }
        .box {
            width: 234px;
            height: 300px;
            /* 背景颜色 */
            background-color: #fff;
            /* 上外边距100px 左右auto */
            margin: 100px auto;
        }
        .box img {
            width: 160px;
            height: 160px;
            /* 转换为块元素 */
            display: block;
            /* 上外边距20px 左右auto */
            margin: 20px auto;
        }
        .box h3 {
            /* 居中文字 */
            text-align: center;
            /* 不加粗 */
            font-weight: 400;
            color: #333333;
        }
        .box .miaoshu {
            color: #b0b0b0;
            font-size: 12px;
            /* 文字居中 */
            text-align: center;
            /* 设置上下外边距 */
            margin: 10px 0;
        }
        .box .price {
            color: #ff6700;
            text-align: center;
            /* 设置上下外边距 */
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <a href="#">
        <div class="box">
            <img src="images/diancilu.webp" alt="">
            <h3>超薄电磁炉</h3>
            <div class="info">
                <p class="miaoshu">纤薄美学，精准猛火</p>
                <p class="price"><span>499元</span></p>
            </div>
        </div>
    </a>
</body>
</html>

Pink老师总结

这些问题同样也是我想问的，哈哈，没想到Pink老师在视频中说出来了，挺好的。

  1. 布局为什么要用不同的盒子？我只想用div？

    • 标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p

  2. 为什么用那么多的类名?

    • 类名就是给每个盒子起了一个名字，可以更好地找到这个盒子，选取盒子更容易，后期维护也方便。

  3. 到底是用margin还是用padding？

    • 大部分情况下两个可以混用，两者各有优缺点，打不世故根据实际情况，总是有更简单的方法实现，

  4. 自己做没有思路？

    • 布局有很多种方式实现，同学们可以先模仿我的写法，然后再做出自己的风格。
    • 最后同学们一定多运用辅助工具，比如屏幕画笔，PS等待..

案例-快报模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            /* 去掉li签名的小圆点，重点!! */
            list-style: none;
        }
        .box {
            width: 248px;
            height: 163px;
            /* 大盒子设置边框1个像素，实线，#ccc颜色 */
            border: 1px solid #ccc;
            /* 外边距，上下100px 左右auto */
            margin: 100px auto;
        }
        .box h3 {
            /* h3的高度 */
            height: 32px;
            color: #ccc;
            /* 行高 */
            line-height: 32px;
            /* 文字大小 */
            font-size: 14px;
            /* 字体不加粗 */
            font-weight: 400;
            /* 下边框1像素，点画线，#ccc色 */
            border-bottom: 1px dotted #ccc;
            /* 左内边距15px */
            padding-left: 15px;
        }
        .box ul li a {
            font-size: 12px;
            color: #666;
            /* 消除掉a标签的下划线 */
            text-decoration: none;
        }
        .box ul li a:hover{
            /* 鼠标移动到链接上显示下划线 */
            text-decoration: underline;
        }
        .box ul li {
            height: 23px;
            line-height: 23px;
            /* 左外边距20px */
            margin-left: 20px;
        }
        .box ul {
            /* 上下内边距 7px */
            padding: 7px 0;
        }
    </style>
</head>
<body>
    <div class="box"> 
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5者秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>
</html>

圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了。

border-radius属性用于设置元素的外边框圆角。

语法
border-radius:length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。

  • 参数值可以为数值或百分比的形式
  • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
  • 如果是个矩形，设置为高度的一半就可以做出一个圆角矩形
  • 该属性是一个简写属性，可以跟四个值，分别代表左上角 、右上角、右下角、左下角

  • 分开写可以这样(顺序不能打乱，必须像下面这样写各个角)：

    • border-top-left-radius：左上角
    • border-top-right-tadius：右上角
    • border-bottom-right-radius：右下角
    • border-bottom-left-radius：左下角
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角</title>
    <style>
        .yuanxing {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border-radius: 50px;
        }
        .jvxing {
            width: 100px;
            height: 50px;
            background-color: skyblue;
            border-radius: 25px;
        }
        .yuanjiao {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="yuanxing"></div>
    <div class="jvxing"></div>
    <div class="yuanjiao"></div>
</body>
</html>

盒子阴影（重点）

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

语法
box-shadow: h-shadow v-shadow blur spread color inset;
值描述
h-shadow必须，水平阴影的位置，允许负值。
v-shadow必须，垂直阴影的位置，允许负值。
blur可选，模糊距离。
spread可选，阴影的尺寸。
color可选，阴影的颜色，请参阅CSS颜色值(用rgba设置透明度效果更好)。
inset可选，将外部阴影(outset)改为内部阴影，但outset不可做为参数值
注意
  1. 默认的是外阴影(outset)，但是不可以写这个单词，否则会导致阴影无效。
  2. 盒子阴影不占用空间，不会影响其他盒子排列。
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        .shadow {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.4); */
        }
        div:hover {
            box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>
    <div class="shadow"></div>
</body>
</html>

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

语法
text-shadow: h-shadow v-shadow blur color;
值描述
h-shadow必须，水平阴影的位置，允许负值。
v-shadow必须，垂直阴影的位置，允许负值。
blur可选，模糊的距离。
color可选。阴影的颜色，
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字阴影</title>
    <style>
        h3 {
            color: skyblue;
            text-shadow: 3px 3px 3px black;
        }
    </style>
</head>
<body>
    <h3>木小果是个大帅哥啊！！</h3>
</body>
</html>

CSS浮动(float)

传统网页布局的三种方式

网页布局的本质：用CSS来摆放盒子，把盒子摆放到相应位置。

CSS提供了三种传统布局的方式（简单来说，就是盒子如何进行排列顺序）：

  • 普通流（标准流）
  • 浮动
  • 定位

标准流

所谓的标准流：就是标签按照规定好的默认方式排列。

  1. 块级元素会独占一行，从上向下顺序排列。

    • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

    • 常用元素：span、a、i、em等

以上都是标准流布局，我i们前面学习的就是标准流，标准流是最基本的布局方式。

这三种布局都是用来摆放盒子的，盒子摆放到合适的位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式）。

为什么需要浮动?

总结：有很多的布局效果，标准流都没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

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

什么是浮动？

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

语法

选择器 { float: 属性值;}
属性值描述
none元素不浮动（默认值）
left元素向左浮动
right元素向右浮动

浮动的特性（重难点）

加了浮动之后的元素，会具有很多特性，需要我们掌握的：

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

设置了浮动（float）的元素最重要的特性

  1. 脱离标准普通流的控制（浮）移动到指定位置（浮），（俗称脱标）。
  2. 浮动的盒子不再保留原先的位置。

浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

注意：浮动的元素是互相贴靠在一起的（不会有缝隙）如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

浮动的元素会具有行内块元素的特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

  • 如果块级盒子没有设置宽度，默认的宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
  • 浮动的盒子中间是没有缝隙的，是紧挨着一起的。
  • 行内元素同理

注意：如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接设置高度和宽度。

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

为了约束浮动元素位置，我们网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

小米布局案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网大图布局</title>
    <style>
        .box {
            width: 1226px;
            height: 460px;
            background-color: skyblue;
            margin: 100px auto;
            text-align: center;
            line-height: 460px;
            font-size: 72px;
        }
        .box .left {
            float: left;
            width: 343px;
            height: 460px;
            background-color: blueviolet;
        }
        .box .right {
            float: left;
            width: 883px;
            height: 460px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>
</html>

浮动布局练习(小米布局案例2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米多个小盒子布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 1226px;
            height: 285px;
            /* 清除小圆点 */
            list-style: none;
            background-color: skyblue;
            /* 居中显示大盒子 */
            margin: 100px auto;
        }
        .box li {
            /* 浮动 */
            float: left;
            width: 296px;
            height: 285px;
            background-color: pink;
            /* 给每个盒子设置右外边距 */
            margin-right: 14px;
        }
        /* 这里必须写 .box .last 要注意权重的问题，如果直接写.last 不会被层叠 */
        .box .last {
            /* 清除末尾 li 的右外边距 */
            margin-right: 0;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li></li>
        <li></li>
        <li></li>
        <li class="last"></li>
    </ul>
</body>
</html>

浮动布局练习(小米布局案例3)

这里我本地有图片但是就不上传到服务器了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城布局案例5</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f5f5f5;
        }
        .box {
            width: 1226px;
            height: 614px;
            background-color: skyblue;
            margin: 20px auto;
        }
        .box .left {
            float: left;
            width: 234px;
            height: 614px;
            background-color: pink;
        }
        .box .right {
            float: left;
            width: 992px;
            height: 614px;
            background-color: #f5f5f5;
        }
        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: #fff;
            margin-left: 14px;
            margin-bottom: 14px;
            text-align: center;
        }
        .right .title {
            font-size: 14px;
            color: black;
            text-align: center;

        }
        .right p {
            margin-top: 5px;
        }
        .right .miaoshu {
            font-size: 12px;
            color: #b0b0b0;
        }
        .right .price {
            font-size: 16px;
            color: #ff6700;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <img src="images/xiaomi/big.webp" alt="">
        </div>
        <div class="right">
            <div>
                <img src="images/xiaomi/1.webp" alt="">
                <h3 class="title">Redmi K50 电竞版</h3>
                <p class="miaoshu">全线拉满的冷血旗舰</p>
                <p class="price">3299元起</p>
            </div>
            <div>
                <img src="images/xiaomi/2.webp" alt="">
            </div>
            <div>
                <img src="images/xiaomi/3.webp" alt="">
            </div>
            <div>
                <img src="images/xiaomi/4.webp" alt="">
            </div>
            <div>
                <img src="images/xiaomi/5.webp" alt="">
            </div>
            <div>
                <img src="images/xiaomi/6.webp" alt="">
            </div>
            <div>
                <img src="images/xiaomi/7.webp" alt="">
            </div>
            <div>
                <img src="images/xiaomi/8.webp" alt="">
            </div>
        </div>
    </div>
</body>
</html>

常见的网页布局

常见的网页布局.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-常见的网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .top {
            height: 50px;
            background-color: gray;
        }
        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }
        .smallbox {
            width: 980px;
            height: 100px;
            background-color: gray;
            margin: 10px auto;
        }
        .smallbox div {
            float: left;
            width: 237px;
            height: 100px;
            background-color: skyblue;
            margin-right: 10px;
        }
        .smallbox .last {
            margin-right: 0;
        }
        .box {
            width: 980px;
            height: 300px;
            background-color: gray;
            margin: 10px auto;
        }
        .box ul li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: pink;
            margin-right: 10px;
        }
        .box .last {
            margin-right: 0;
        }
        /* 只要浏览器是通栏的盒子（和浏览器一样宽），就不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="smallbox">
        <div>盒子1</div>
        <div>盒子2</div>
        <div>盒子3</div>
        <div class="last">盒子4</div>
    </div>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li class="last"></li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>
</html>

浮动布局的注意点

浮动和标准流的父盒子搭配
  • 先用标准流的父元排列上下位置，之后内部子元素采取浮动排列左右位置。
一个元素浮动了，理论上其余的兄弟也要浮动
  • 一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他的兄弟(同级)盒子也应该浮动，以防止引发不可预料的问题
  • 【重点】浮动的盒子只会影响后面的标准流，不会影响前面的标准流。
  • 【重点】浮动的盒子只会影响后面的标准流，不会影响前面的标准流。
  • 【重点】浮动的盒子只会影响后面的标准流，不会影响前面的标准流。

重要的事情说三遍！！！！

清除浮动

为什么我们需要清除浮动？

由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

为什么我们需要清除浮动.png

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

清除浮动的本质

  1. 清除浮动的本质是：清除浮动元素造成的影响。
  2. 如果让父盒子本身有高度，则不需要清除浮动。
  3. 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级就有了高度，就不会影响下面的标准流了。

清除浮动

语法
选择器{clear:属性值;}
属性值属性
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响

我们实际工作中，几乎只用clear:both;

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

清除浮动的方法

  1. 额外标签法，也称为隔墙法，是W3C推荐的做法。
  2. 父级添加overflow属性
  3. 父级添加lafter为元素
  4. 父级添加双伪元素
额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法

额外标签法会在浮动元素末尾添加一个空的标签，例如：<div style="clear:both"></div>，或其他标签（如<br/>等）。

  • 优点：通俗易懂，书写方便
  • 缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的标签必须是块级元素

总结

  1. 清除浮动的本质是?

    • 清除浮动的本质是清除浮动元素脱离标准流造成的影响

  2. 清除浮动的策略是?

    • 闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的

  3. 额外标签法是?

    • 隔墙法，就是在最后一个浮动的子元素后面加上一个额外标签，添加清除浮动样式
    • 实际工作可能会用到但不常用

PS:我也不喜欢这个，还要加一个标签啧啧啧啧~~

父级添加overflow属性

可以给父级添加overflow属性，将其属性值设为hidden、auto或scroll。

子不教，父之过

注意是给父元素添加代码

总结
  • 优点：代码简洁
  • 缺点：无法显示溢出的部分

:after 为元素法

:after方式是额外标签的升级版，也是给父元素添加

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* IE6、IE7专有 */
    *zoom: 1;
}
  • 优点：没有增加标签，结构更简单
  • 缺点：照顾低版本浏览器
  • 代表网站：百度、淘宝、网易等..

双伪元素法

也是给父级元素添加

.clearfix:before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
总结
  • 优点：代码更简洁
  • 缺点：照顾低版本浏览器
  • 代表网站：小米、腾讯等..

清除浮动总结

为什么要清除浮动
  1. 父亲没高度
  2. 子盒子浮动了
  3. 影响下面布局了，我们就应该清除浮动了
清除浮动的方式优点缺点
额外标签法(隔墙法)通俗易懂，书写简便添加了许多无意义的标签，结构化较差
父级overflow:hiden书写简单溢出的部分会被隐藏
父级after元素结构语义化正确由于IE6-7不支持:after，兼容性问题
父级双为元素结构语义化正确由于IE6-7不支持:after，兼容性问题
最后修改：2022 年 02 月 22 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏~