【css】清除浮動（clearfix 和 clear）的用法

時間 2019-11-22

標籤 css 清除浮動 clearfix clear 用法欄目 CSS 简体版

原文原文鏈接

本文主要是講解如何在 html 中使用 clearfix 和 clear，針對那些剛開始瞭解 css 的童鞋。關於 clearfix 和 clear 的樣式在這裏我就不寫了，具體樣式點擊此處。css

下面就談談對於這兩個 class 的用法，首先咱們先看個例子：html

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>如何在html中使用clearfix和clear</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
    <style type="text/css">
    .fl{float:left;}
    .demo{background:#ccc;}
    .item1{background:#f90;height:100px;width:100px;}
    .item2{background:#fc0;height:200px;width:100px;}
    </style>
</head>
<body>
    <div class="demo">
        <div class="fl item1"></div>
        <div class="fl item2"></div>
    </div>
</body>
</html>

咱們都知道使用浮動會產生不少未知的問題，經過上面的例子咱們能夠發現 class="demo" 的高度並無被裏面的 div 給撐開，這是由於裏面的 div 產生浮動而脫離了該文檔，由於 demo 自己沒有高度，因此咱們看不到它的灰色背景。固然只要給 demo 一個高度就好了，可是這就脫離了本文的目的（有時咱們但願外層 div 的高度由裏面的內容來決定）。spa

既然是浮動產生的問題，那麼只要清除浮動就能夠了，相信高手們有不少清除浮動的方法，好比 overflow:hidden。下面我將介紹用 clearfix 和 clear 來清除浮動。code

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>如何在html中使用clearfix和clear</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
    <style type="text/css">
    .fl{float:left;}
    .demo{background:#ccc;}
    .item1{background:#f90;height:100px;width:100px;}
    .item2{background:#fc0;height:200px;width:100px;}
    </style>
</head>
<body>
    <h2>用 clear 清除浮動</h2>
    <div class="demo">
        <div class="fl item1"></div>
        <div class="fl item2"></div>
        <div class="clear"></div>
    </div>
    <h2>用 clearfix 清除浮動</h2>
    <div class="clearfix demo">
        <div class="fl item1"></div>
        <div class="fl item2"></div>
    </div>
</body>
</html>