CSS：爲什麼我需要after僞和內容：「」在這種情況下

我下面這個教程http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_cols和困惑，爲什麼我的僞和內容後，需要：「」在這種情況下：CSS：爲什麼我需要after僞和內容：「」在這種情況下

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <style> 
 
    * { 
 
    box-sizing: border-box; 
 
    } 
 
    .header { 
 
    border: 1px solid red; 
 
    padding: 15px; 
 
    } 
 
    .row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
    } 
 
    [class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
    border: 1px solid red; 
 
    } 
 
    .col-1 {width: 8.33%;} 
 
    .col-2 {width: 16.66%;} 
 
    .col-3 {width: 25%;} 
 
    .col-4 {width: 33.33%;} 
 
    .col-5 {width: 41.66%;} 
 
    .col-6 {width: 50%;} 
 
    .col-7 {width: 58.33%;} 
 
    .col-8 {width: 66.66%;} 
 
    .col-9 {width: 75%;} 
 
    .col-10 {width: 83.33%;} 
 
    .col-11 {width: 91.66%;} 
 
    .col-12 {width: 100%;} 
 
    </style> 
 
    </head> 
 
    <body> 
 

 
    <div class="header"> 
 
    <h1>Chania</h1> 
 
    </div> 
 

 
    <div class="row"> 
 

 
    <div class="col-3"> 
 
    <ul> 
 
    <li>The Flight</li> 
 
    <li>The City</li> 
 
    <li>The Island</li> 
 
    <li>The Food</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="col-9"> 
 
    <h1>The City</h1> 
 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
 
    <p>Resize the browser window to see how the content respond to the resizing.</p> 
 
    </div> 
 

 
    </div> 
 
    </body> 
 
    </html>

我在互聯網上搜索，我還沒有發現有任何的想法提前

來源

2016-10-23 phoenix

https://www.sitepoint.com/understanding-css-content-property/ https://developer.mozilla.org/en-US/docs/Web/CSS/content – prasanth

謝謝，但我在這問過案件有什麼影響。 – phoenix

這就是所謂的clearfix你可以在這裏看到細節https://css-tricks.com/snippets/css/clear-fix/ – vals

由於這是一個對於花車

.maincontainer{ 
 
border:1px solid green; 
 
} 
 
.maincontainer div{ 
 
    float:left; 
 
    border:1px solid green; 
 
    margin:20px; 
 
}

<div class="maincontainer"> 
 
    
 
    <div id="cell1">cell1</div> 
 
    <div id="cell2">cell2</div> 
 
    <div id="cell3">cell3</div> 
 
    </div>

明確的修復檢查上面的代碼片段

的mainContainer上內所有三個div的漂浮到left.Once他們漂到左邊，他們是從父帶走佈局，所以這是maincontainer的邊框不能正確顯示的原因

要解決此問題，您需要應用clearfix

.maincontainer{ 
 
border:1px solid green 
 
} 
 

 
.maincontainer div{ 
 
float:left; 
 
    border:1px solid red; 
 
    margin:20px; 
 
} 
 

 

 
.clearfix::after{ 
 
content:""; 
 
    display:block; 
 
    visibility:hidden; 
 
    clear:both; 
 
}

<div class="maincontainer clearfix"> 
 
    
 
    <div> 
 
    cell1</div> 
 
    
 
    <div> 
 
    cell2</div> 
 
    <div> 
 
    cell3</div> 
 
    </div>

這裏clearfix，試圖插入後DIV（mainContainer上）一個虛設的元素呈現，用空的內容，並在其上清除浮動，這將解決父元素的邊界問題

這個參考會幫助你

What does the CSS rule clear: both do?

希望這有助於

來源

2016-10-24 20:53:49 Geeky

中做了什麼效果考慮如果對你有任何幫助，接受答案 – Geeky

正如在我之前的評論中所述，僞元素充當了一個clearfix。通常情況下，您需要在其上添加一個元素clear: both以清除列中的浮點數，但僞元素允許我們在沒有任何額外標記的情況下執行此操作。

現在content: ""部分的原因是僞元素require content to be inserted in order to be rendered at all。

來源

2016-10-24 20:55:00 ppajer

CSS：爲什麼我需要after僞和內容：「」在這種情況下

回答

相關問題