P184 23-清除浮动本质以及额外标签法

清除浮动本质

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

语法:

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

我们实际工作中,几乎只用clear:both;
清除浮动的策略是:闭合浮动。

清除浮动方法

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

清除浮动——额外标签法
额外标签法也成为隔墙法,是W3C 推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如

,或者其他标签(如
等)。
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
注意:要求这个新的空标签必须是块级元素。


<html lang="zh-CN">

<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: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    style>
head>

<body>
    <div class="box">
        <div class="damao">大毛div>
        <div class="ermao">二毛div>
        <div class="ermao">二毛div>
        <div class="ermao">二毛div>
        <div class="ermao">二毛div>
        <div class="clear">div>
    div>
    <div class="footer">div>
body>

html>

P184 23-清除浮动本质以及额外标签法_第1张图片

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


<html lang="zh-CN">

<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: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    style>
head>

<body>
    <div class="box">
        <div class="damao">大毛div>
        <div class="ermao">二毛div>
        <div class="ermao">二毛div>
        <div class="ermao">二毛div>
        <div class="ermao">二毛div>
        
        
        <span class="clear">span>
    div>
    <div class="footer">div>
body>

html>

P184 23-清除浮动本质以及额外标签法_第2张图片

你可能感兴趣的:(CSS,css)