Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home Web Front-end HTML Tutorial 浅谈 CSS 清除浮动的6种方法_html/css_WEB-ITnose

浅谈 CSS 清除浮动的6种方法_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 21, 2016 am 09:04 AM

  • 额外标签法

  • 使用:after 伪元素

  • 给父元素定高

  • 利用overflow:hidden;属性

  • 父元素浮动

  • 父元素处于绝对定位

    • 在开发网页的时候经常需要用到各种浮动，此时便需要及时的清除浮动，否则将会导致布局出现问题

    引出问题：

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width:300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Copy after login

    可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们，此刻只剩一条由上写边框贴合组成的线，同时 footer DIV元素也跑到了三个浮动元素的底下

    解决办法：

    1.使用额外标签发

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix{            clear: both;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>        <div class="clearfix"></div>    </div>    <div class="footer"></div></body></html>

    Copy after login

    这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美

    2.使用:after 为元素

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix:after{  /*最简方式*/            content: '';            display: block;            clear: both;        }        /* 新浪使用方式        .clearfix:after{             content: '';            display: block;            clear: both;            height: 0;            visibility: hidden;        }        */        .clearfix{ /*兼容 IE*/            zoom: 1;        }    </style></head><body>    <div class="outer clearfix">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Copy after login

    3.给父元素定高

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            height: 50px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Copy after login

    4.利用 overflow:hidden 属性

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            overflow: hidden;            zoom: 1;/*兼容 IE*/        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Copy after login

    5.父元素浮动

    当父元素浮动的时候，无需为子元素的浮动清除浮动,布局时经常用到

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            float: left;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Copy after login

    可以看出虽然 outer DIV 消除了塌陷现象，但由于其也发生了浮动故，其后元素若无处于正常文档流，会被跌在底下。
    如果要解决可以参考前面的办法。

    例如：

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            float: left;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix:after{            content: "";            display: block;            clear: both;        }        .clearfix{            zoom: 1;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="clearfix"></div>    <div class="footer"></div></body></html>

    Copy after login

    6.父元素处于绝对定位

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            position: absolute;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="clearfix"></div>    <div class="footer"></div></body></html>

    Copy after login


    与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Show More

    Hot Article

    What's New in Windows 11 KB5054979 & How to Fix Update Issues
    4 weeks ago By DDD
    How to fix KB5055523 fails to install in Windows 11?
    3 weeks ago By DDD
    InZoi: How To Apply To School And University
    1 months ago By DDD
    How to fix KB5055518 fails to install in Windows 10?
    3 weeks ago By DDD
    Where to find the Site Office Key in Atomfall
    1 months ago By DDD
    Show More

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Show More

    Hot Topics

    Where is the login entrance for gmail email?
    7912
    15
    Java Tutorial
    1652
    14
    CakePHP Tutorial
    1411
    52
    Laravel Tutorial
    1303
    25
    PHP Tutorial
    1248
    29
    Show More
    Related knowledge
    Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

    HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

    The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

    HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

    Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

    WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

    Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

    GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

    What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

    AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

    How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

    To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

    HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

    HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

    How to distinguish between closing a browser tab and closing the entire browser using JavaScript? How to distinguish between closing a browser tab and closing the entire browser using JavaScript? Apr 04, 2025 pm 10:21 PM

    How to distinguish between closing tabs and closing entire browser using JavaScript on your browser? During the daily use of the browser, users may...

    See all articles