CSS 3 浮動佈局，深度挖掘 -cyy

時間 2020-11-16

標籤 css html segmentfault 網站 spa code htm blog 文檔欄目 CSS 简体版

原文原文鏈接

文檔流與浮動空間丟失：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        div{
            width:300px;
            height:300px;
        }
        div:nth-of-type(1){
            border:1px solid red;
            /* 前面的浮動，後面的不浮動，則後面的會頂上來 */
            /* float:left; */
        }
        div:nth-of-type(2){
            background:lightblue;
            /* 前面的浮動，後面的也浮動，則兩個元素並排 */
            /* 前面的不浮動，後面的浮動，則後面的不受前面的影響 */
            float:left;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

行級元素浮動後轉爲塊元素：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        div{
            width:40%;
            border:1px solid black;
            padding:10px;
            height:400px;
        }
        span{
            width:300px;
            height:300px;
            border:1px solid red;
            /* span浮動後轉爲塊元素，此時設置的寬高才會生效
            但不建議這麼作，由於不符合語義 */
            float:left;
        }
        span:nth-of-type(1){
            float:right;
        }
    </style>
</head>
<body>
    <div>
        <span>span</span>
        <span>span</span>
    </div>
</body>
</html>

清除浮動對元素的影響：segmentfault

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        div{
            width:100px;
            height:100px;
        }
        div:nth-of-type(1){
            border:3px solid red;
            float:left;
        }
        div:nth-of-type(2){
            border:3px solid orange;
            float:right;
        }
        div:nth-of-type(3){
            border:3px solid green;
            /* 清除它前面的元素左浮動和右浮動帶來的影響 */
            clear:both;
        }
        
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

使用clearfix清除浮動：網站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        main{
            width:100%;
            border:1px solid pink;
        }
        div{
            width:100px;
            height:100px;
            float:left;
        }
        div:nth-of-type(1){
            border:3px solid red;
            float:left;
        }
        div:nth-of-type(2){
            border:3px solid orange;
        }
        div:nth-of-type(3){
            border:3px solid green;
        }
        .clearfix{
            clear:both;
        }
        
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
        <div></div>
        <article class="clearfix"></article>
    </main>
</body>
</html>

經過after僞元素清除浮動：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        main{
            width:100%;
            border:1px solid pink;
        }
        main::after{
            content:'';
            display:block;
            clear:both;
        }
        div{
            width:100px;
            height:100px;
            float:left;
        }
        div:nth-of-type(1){
            border:3px solid red;
            float:left;
        }
        div:nth-of-type(2){
            border:3px solid orange;
        }
        div:nth-of-type(3){
            border:3px solid green;
        }
        
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
        <div></div>
    </main>
</body>
</html>

overflow觸發BFC清除浮動：code

關於什麼是BFC機制，這篇文章寫的很好：http://www.javashuo.com/article/p-zckldxty-ee.htmlhtm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        main{
            width:100%;
            border:1px solid pink;
            /* 只要是overflow都能觸發BFC機制 */
            overflow:hidden;
            overflow:auto;
            overflow:scroll;
        }
        div{
            width:100px;
            height:100px;
            float:left;
        }
        div:nth-of-type(1){
            border:3px solid red;
            float:left;
        }
        div:nth-of-type(2){
            border:3px solid orange;
        }
        div:nth-of-type(3){
            border:3px solid green;
        }
        
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
        <div></div>
    </main>
</body>
</html>