• html清楚浮动

    为什么要清除浮动？

    我们前面浮动元素有一个标准流的父元素，他们有一个共同点特点，都是有高度的。

    但是，不是所有的父盒子都必须有高度。

    理想中的状态，让子盒子撑开父亲，有多少孩子，父盒子就有多高。

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

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

    清楚浮动的本质？

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

    语法：

    选择器{clear：属性值；}

    属性值

    描述

    Left

    不允许左侧有浮动元素（清除左侧浮动的影响）

    right

    不允许右侧有浮动元素（清楚右侧浮动的影响）

    Both

    同时清楚左右两侧浮动的影响

    我们实际工作中，几乎只用clear：both；

    清楚浮动的策略时：闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他的盒子）

    清楚浮动的方法：

    1. 额外标签法，也成为隔墙法，是w3c推荐的做法

    额外标签法会在浮动元素末尾添加一个空的标签，例如

    ,或者其他标签
    。

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5.  
    6.  
    7. <head>
    8.  
    9.     <meta charset="UTF-8">
    10.  
    11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    12.  
    13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    14.  
    15.     <title>为什么需要清楚浮动title>
    16.  
    17.     <style>
    18.  
    19.         .box {
    20.  
    21.             width: 800px;
    22.  
    23.             border: 1px solid blue;
    24.  
    25.             margin: 0 auto;
    26.  
    27.         }
    28.  
    29.  
    30.  
    31.         .damao {
    32.  
    33.             float: left;
    34.  
    35.             width: 300px;
    36.  
    37.             height: 200px;
    38.  
    39.             background-color: purple;
    40.  
    41.  
    42.  
    43.         }
    44.  
    45.  
    46.  
    47.         .ermao {
    48.  
    49.             float: left;
    50.  
    51.             width: 200px;
    52.  
    53.             height: 200px;
    54.  
    55.             background-color: pink;
    56.  
    57.         }
    58.  
    59.  
    60.  
    61.         .footer {
    62.  
    63.             height: 100px;
    64.  
    65.             background-color: aquamarine;
    66.  
    67.         }
    68.  
    69.  
    70.  
    71.         .clear {
    72.  
    73.             clear: both;
    74.  
    75.         }
    76.  
    77.     style>
    78.  
    79. head>
    80.  
    81.  
    82.  
    83. <body>
    84.  
    85.     <div class="box">
    86.  
    87.         <div class="damao">大毛div>
    88.  
    89.         <div class="ermao">二毛div>
    90.  
    91.         <div class="clear">div>
    92.  
    93.     div>
    94.  
    95.     <div class="footer">div>
    96.  
    97. body>
    98.  
    99.  
    100.  
    101. html>

    优点：通俗易懂，书写方便

    缺点：添加许多无意义的标签，结构化比较差。

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

    1. 父级添加overflow属性

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

    子不教，父之过，注意是给父元素添加代码。

    优点：代码简洁

    缺点：无法显示溢出的部分

    1. 父级添加after属性

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

    1. .clearfix:after {
    2.  
    3.             content: "";
    4.  
    5.             display: block;
    6.  
    7.             height: 0;
    8.  
    9.             clear: both;
    10.  
    11.             visibility: hidden;
    12.  
    13.         }
    14.  
    15.  
    16.  
    17.         .clearfix {
    18.  
    19.             /* ie 6、7专有 */
    20.  
    21.             *zoom: 1;
    22.  
    23.         }

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

    缺点：照顾低版本浏览器

    代表网站：百度、淘宝网、网易等

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5.  
    6.  
    7. <head>
    8.  
    9.     <meta charset="UTF-8">
    10.  
    11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    12.  
    13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    14.  
    15.     <title>为什么需要清楚浮动title>
    16.  
    17.     <style>
    18.  
    19.         .clearfix:after {
    20.  
    21.             content: "";
    22.  
    23.             display: block;
    24.  
    25.             height: 0;
    26.  
    27.             clear: both;
    28.  
    29.             visibility: hidden;
    30.  
    31.         }
    32.  
    33.  
    34.  
    35.         .clearfix {
    36.  
    37.             /* ie 6、7专有 */
    38.  
    39.             *zoom: 1;
    40.  
    41.         }
    42.  
    43.  
    44.  
    45.         .box {
    46.  
    47.             width: 800px;
    48.  
    49.             border: 1px solid blue;
    50.  
    51.             margin: 0 auto;
    52.  
    53.             /* 清楚浮动 */
    54.  
    55.             /* overflow: auto; */
    56.  
    57.         }
    58.  
    59.  
    60.  
    61.         .damao {
    62.  
    63.             float: left;
    64.  
    65.             width: 300px;
    66.  
    67.             height: 200px;
    68.  
    69.             background-color: purple;
    70.  
    71.  
    72.  
    73.         }
    74.  
    75.  
    76.  
    77.         .ermao {
    78.  
    79.             float: left;
    80.  
    81.             width: 200px;
    82.  
    83.             height: 200px;
    84.  
    85.             background-color: pink;
    86.  
    87.         }
    88.  
    89.  
    90.  
    91.         .footer {
    92.  
    93.             height: 100px;
    94.  
    95.             background-color: aquamarine;
    96.  
    97.         }
    98.  
    99.  
    100.  
    101.         .clear {
    102.  
    103.             clear: both;
    104.  
    105.         }
    106.  
    107.     style>
    108.  
    109. head>
    110.  
    111.  
    112.  
    113. <body>
    114.  
    115.     <div class="box clearfix">
    116.  
    117.         <div class="damao">大毛div>
    118.  
    119.         <div class="ermao">二毛div>
    120.  
    121.         
    122.  
    123.         
    124.  
    125.     div>
    126.  
    127.     <div class="footer">div>
    128.  
    129. body>
    130.  
    131.  
    132.  
    133. html>

    1. 父级添加双伪元素

    也是给父元素添加。

    1. .clearfix:before,
    2.  
    3.         .clearfix:after {
    4.  
    5.             content: "";
    6.  
    7.             display: table;
    8.  
    9.         }
    10.  
    11.  
    12.  
    13.         .clearfix:after {
    14.  
    15.             clear: both;
    16.  
    17.         }
    18.  
    19.  
    20.  
    21.         .clearfix {
    22.  
    23.             *zoom: 1;
    24.  
    25.         }

    优点：代码更简洁

    缺点：照顾低版本浏览器

    代表网站：小米、腾讯等等

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5.  
    6.  
    7. <head>
    8.  
    9.     <meta charset="UTF-8">
    10.  
    11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    12.  
    13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    14.  
    15.     <title>为什么需要清楚浮动title>
    16.  
    17.     <style>
    18.  
    19.         .clearfix:before,
    20.  
    21.         .clearfix:after {
    22.  
    23.             content: "";
    24.  
    25.             display: table;
    26.  
    27.         }
    28.  
    29.  
    30.  
    31.         .clearfix:after {
    32.  
    33.             clear: both;
    34.  
    35.         }
    36.  
    37.  
    38.  
    39.         .clearfix {
    40.  
    41.             *zoom: 1;
    42.  
    43.         }
    44.  
    45.  
    46.  
    47.         .box {
    48.  
    49.             width: 800px;
    50.  
    51.             border: 1px solid blue;
    52.  
    53.             margin: 0 auto;
    54.  
    55.             /* 清楚浮动 */
    56.  
    57.             /* overflow: auto; */
    58.  
    59.         }
    60.  
    61.  
    62.  
    63.         .damao {
    64.  
    65.             float: left;
    66.  
    67.             width: 300px;
    68.  
    69.             height: 200px;
    70.  
    71.             background-color: purple;
    72.  
    73.  
    74.  
    75.         }
    76.  
    77.  
    78.  
    79.         .ermao {
    80.  
    81.             float: left;
    82.  
    83.             width: 200px;
    84.  
    85.             height: 200px;
    86.  
    87.             background-color: pink;
    88.  
    89.         }
    90.  
    91.  
    92.  
    93.         .footer {
    94.  
    95.             height: 100px;
    96.  
    97.             background-color: aquamarine;
    98.  
    99.         }
    100.  
    101.  
    102.  
    103.         .clear {
    104.  
    105.             clear: both;
    106.  
    107.         }
    108.  
    109.     style>
    110.  
    111. head>
    112.  
    113.  
    114.  
    115. <body>
    116.  
    117.     <div class="box clearfix">
    118.  
    119.         <div class="damao">大毛div>
    120.  
    121.         <div class="ermao">二毛div>
    122.  
    123.         
    124.  
    125.         
    126.  
    127.     div>
    128.  
    129.     <div class="footer">div>
    130.  
    131. body>
    132.  
    133.  
    134.  
    135. html>

    清除浮动总结：

    为什么需要浮动？

    1. 父级没高度
    2. 子盒子浮动了
    3. 影响下面布局了，我们就应该清除浮动了

    清除浮动的方式

    优点

    缺点

    额外标签法（隔墙法）

    通俗易懂，书写方便

    添加许多无意义标签，结构化较差

    父级overflow:hidden;

    书写简单

    溢出隐藏

    父级after伪元素

    结构语义化正确

    由于ie6-7不支持：after

    兼容性问题

    父级双伪元素

    结构语义化正确

    由于ie6-7不支持：after

    兼容性问题

  • 相关阅读:
    学生环境保护绿色家园 WEB静态网页作业模板 大学生环境保护网页代码 dreamweaver网页设计作业制作 dw个人网页作业成品
    15.RedHat认证-Ansible自动化运维(上)
    个人实现在线支付，一种另类的在线支付解决方案
    批量发送邮件时怎么使用蜂邮EDM与Outlook？
    mac(M1）卸载miniconda3
    PyCharm中常用插件推荐
    【深入理解java虚拟机】 - JVM垃圾回收器
    《前端》JavaScript--常用库API
    55_Pandas.DataFrame 转换为 JSON 字符串/文件并保存 (to_json)
    前端框架海洋：如何破浪前行，寻找你的“黄金舟”
  • 原文地址：https://blog.csdn.net/m0_51495354/article/details/127836655