Day_9

CSS透明フロート

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スタイル> 
        のdiv { 
            高さ：200pxの。
        } 
        のdiv李{ 
            フロート：左; 
            背景：＃0457b7。
            マージン：30px; 
            フォントサイズ：30px; 
        } 
    </スタイル> 
</ head> 
<body> 
    <div> 
        <UL> 
            <LI> Whonenow </ LI> 
            <LI> Whonenow </ LI> 
            <LI> Whonenow </ LI> 
            <LI>
    </ div> 
</ BODY> 
</ HTML>

　　コードに示すように、ページは私がするdiv UL内の所定の位置に入れ、その後、6つの李、李の内側に入れて、フロートは左側に配置されており、今回の結果は、図に示します。

　　だから、基本的に問題はないの効果を見て、私たちは、6個のLiが並んで達成し、我々は見つけるchecked'llとき

　　ULはフローティング後の子要素は、もはや親要素に属する定義されているので、もはや0の親要素の内部異常により引き起こされる浮動高さのLiが含まれ、何の高されていない上部の高さに押され親要素は、最大縮小します。

　　これは、私たちが何をしたいです

　　それはそのようになってきました

　　我々は、フローティングの影響を除去する方法を見つける今回、我々は、フローティングのいくつかの明確な影響力を持っています

　　1.追加のラベリング法

　　2.親オーバーフローを追加します。

　　3.明確after疑似要素

　　4.クリアなどの前と後

　　以下は、フローティング除去する方法であります

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 200px;
        }
        div li {
            float: left;
            background: #0457b7;
            margin: 30px;
            font-size: 30px;
        }
        div ul {
        }
        .di {
            height: 400px;
            background: #E91E63;
            clear: both;    /*此处清除浮动*/
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
            <li>Whonenow</li>
        </ul>
        <div class="di"></div>
    </div>
</body>
</html>

　　溜了溜了

おすすめ