clear僞類使用

時間 2019-11-10

標籤 clear 使用简体版

原文原文鏈接

都知道float會脫離文檔流用什麼辦法撐開父元素呢？手動在本區塊的全部float元素以後加上一個塊元素並對其添加clear:bothcss

能夠可是這樣還要再去修改html頁面並且多了一個僅僅是爲了控制佈局卻沒有實際表現意義的元素很差..html

將float的父元素也設定爲float 這樣會致使更深的問題佈局

將父元素設爲overflow:hidden 很不錯的辦法推薦！可是我但願內部的元素可以超出怎麼弄呢？ui

用僞類！只須要修改css 就能向html中添加一個元素啦！spa

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <style type="text/css">
        .root{
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 50px;
        }
        .pos{

        }
        .fl{
            width: 300px;
            height: 200px;
            float: left;
            background-color: lime;
        }
        .fl2{
            background-color: black;
        }
        .pos:after{
            /*這5個屬性缺一不可*/
            content: '.';
            visibility: hidden;
            clear: both;
            display: block;
            height: 0px; /*若是沒有這個 容器會比float元素行多出一行字的高度*/

        }
        </style>
    </head>
    
    <body>
        <div class='root'>
        <div class='pos'>
            <div class='fl'></div>
            <div class='fl fl2'></div>
        </div>
        </div>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。