CSS"清浮动"-相关方法

来源：互联网发布：什么网游有mac版编辑：程序博客网时间：2024/05/17 21:47

浮动使父级标签塌陷

示例-1

<!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8" />        <title>Document</title>        <style type="text/css">            .wrapper {                width: 500px;                border: 3px solid orange;            }            img {                float: right;            }        </style>    </head>    <body>        <div class="wrapper">            浮动使父级标签塌陷            <img src="img/small.gif" alt="" />        </div>    </body></html>

示例图图片

示例-2

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title>    <style type="text/css">    .wrapper {        width: 500px;        border: 3px solid orange;    }    .inside {        float: right;        width: 300px;        height: 300px;        background-color: blue;    }    </style></head><body>    <div class="wrapper">        浮动使父级标签塌陷        <div class="inside"></div>    </div></body></html>

这里写图片描述

解决方法

方法-1

在包裹着浮动元素的父级底部加入<br clear="both" />或<br clear="all" />

    <div class="wrapper">        浮动使父级标签塌陷        <img src="img/small.gif" alt="" />        <br clear="both" />    </div>

这里写图片描述

方法-2

设置包裹着浮动元素的父级样式overflow: auto;或overflow: hidden; (效果同上图) (仅试用于浮动元素为图片的场景)

.wrapper {    overflow: auto;    /*overflow: hidden;*/}

方法-3 （通用方法）

1-利用伪元素 : :before 和 : :after 构建标签填充
2-添加无内容块级实际标签设置清楚浮动

: :before 和 : :after 法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title>    <style type="text/css">    .wrapper {        width: 500px;        border: 3px solid orange;    }    .inside {        float: right;        width: 300px;        height: 300px;        background-color: blue;    }    .wrapper::before,    .wrapper::after {        content: "";        display: table;     /*或 display: block;*/    }    .wrapper::after {        clear: both;        height: 0;        overflow: hidden;        visibility: hidden;    }    .wrapper{        zoom: 1;        /*兼容 IE6/7*/    }    </style></head><body>    <div class="wrapper">        浮动使父级标签塌陷        <div class="inside"></div>    </div></body></html>

这里写图片描述

添加无内容块级实际标签法（效果如上图）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title>    <style type="text/css">    .wrapper {        width: 500px;        border: 3px solid orange;    }    .inside {        float: right;        width: 300px;        height: 300px;        background-color: blue;    }    .clearfix {        clear: both;        zoom: 1;        height: 0;        margin: 0;        padding: 0;        overflow: hidden;        visibility: hidden;    }    </style></head><body>    <div class="wrapper">        浮动使父级标签塌陷        <div class="inside"></div>        <p class="clearfix"></p>            <!-- 直接设置空<div>更方便 或是行内标签+display: block; -->    </div></body></html>

1 0