部分反覆溢出

我仍在努力改進我的第一個網站項目。一個令我頭痛的問題是有些章節不斷涌入上述內容。當我說溢出時，我的意思是，當我點擊括號中的元素時，在實時預覽中突出顯示時，它顯示的邊距實際上圍繞着上面的其他內容（如圖所示）。這是發生在我的網站的各個部分，我不明白爲什麼。我在這裏是一個初學者，所以我確信這是一個簡單的理由，爲什麼以及如何在整個網站上修復它。部分反覆溢出

Overflow issue in this image

對於一些部分我可以用「溢出解決這個問題：無」屬性，但最好我想解決這個問題，而不需要反覆使用注意事項，溢出沒有財產的心不是。對所有部分的工作，特別是一個我已經展示的形象。任何人都可以在這裏給出一些清晰嗎？

html { 
 
    box-sizing: border-box; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background-color: #f6f8fa; 
 
    color: #4E6E9B; 
 
    font-family: 'Signika', sans-serif; 
 
    font-weight: 'E'; 
 
} 
 

 
/* END GENERAL STYLES -----------*/ 
 

 
.one-third-container { 
 
    float: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.about-one-third { 
 
    width: 33.3333%; 
 
    padding: 2% 0; 
 
    float: left; 
 
    text-align: center; 
 
    background-color: #0066B2; 
 
    color: #f6f8fa; 
 
} 
 

 
.about-one-third i { 
 
    font-size: 8rem; 
 
    padding-bottom: 5%; 
 
} 
 

 

 
/* END ONE THIRD SECTIONS ------*/ 
 

 
.services-offered { 
 
    padding-left: 0; 
 
    margin: 2% 5%; 
 
    -webkit-padding-start: 0; 
 
    list-style-type: none; 
 
    overflow: none; 
 
} 
 

 
.services-offered li { 
 
    display: inline-block; 
 
    width: 20%; 
 
    vertical-align: top; 
 
    padding: 0 0 0 1.8rem; 
 
    text-align: justify; 
 
} 
 

 
.services-offered li:before { 
 
    content: "\f00c"; 
 
    font-family: FontAwesome; 
 
    width: 1.8rem; 
 
    margin-left: -1.8rem; 
 
    margin-right: 0.5rem; 
 
} 
 

 
/* END SERVICES OFFERED ---------*/

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>W Gooderham Gas Services</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Raleway:200,700|Signika:300" rel="stylesheet"> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> 
 
</head>[enter image description here][1] 
 
    
 
    <div class="one-third-container"> 
 
     <section class="about-one-third"> 
 
      <td> 
 
       <i id="third-border" class="fa fa-calendar"></i> 
 
      </td> 
 
      <h2>Routine Servicing</h2> 
 
     </section> 
 

 
     <section class="about-one-third" id="centre-third"> 
 
      <td> 
 
       <i id="third-border" class="fa fa-wrench"></i> 
 
      </td> 
 
      <h2>Installation</h2> 
 
     </section> 
 

 
     <section class="about-one-third" id="breakdown"> 
 
      <td> 
 
       <i class="fa fa-snowflake-o"></i> 
 
      </td> 
 
      <h2>Breakdowns</h2> 
 
     </section> 
 
    </div> 
 
    
 
<! END ONE THIRD SECTION ---------------------> 
 
    
 
    <ul class="services-offered"> 
 
     <li> 
 
     Installation and commission of natural gas central heating systems. 
 
     </li> 
 
     
 
     <li> 
 
     Routine servicing of all natural gas appliances including warm air units. 
 
     </li> 
 
     
 
     <li> 
 
     If any of your gas appliances breakdown, we provide a 7 day a week callout service to get them back up and running. 
 
     </li> 
 
     
 
     <li> 
 
     We can provide gas safety landlord certification for all gas appliances in your properties. 
 
     </li> 
 
    </ul>

來源

2017-09-26 c.gooderham94

我沒有讀取所有代碼，但最常見的問題是由於「浮動」而導致容器崩潰。谷歌的「clearfix」，如果你還沒有嘗試過。 – deadfishli

是的，你的'float：left;'是你的問題 – SourceOverflow

好吧，我明白了元素溢出的原理。所以我從容器中取出了浮子，但保留在三分之一的部分上。然而，問題仍然存在，現在我難住了，因爲容器中的浮動不應該影響任何其他元素（畢竟，這些樣式是正確的？） –

元素「溢出」到上述元素的原因是因爲您在類one-third-container（這很好！）上使用了float: left;。但是，如果下面的元素沒有任何float，那麼您得到的元素被推向高於預期的不利結果。如果將float:left;添加到ul（或類services-offered），則可以防止此問題。

編輯：刪除float:left也可以在這種情況下工作，因爲元素不需要被浮動。

編輯2：浮動確實沒有那麼多，因爲他們幾年前。當使用浮動元件時，未清除的元素是一個常見問題，這就是爲什麼flexbox被認爲更好。 Flexbox有許多用例可以簡化許多佈局問題，而這些問題在沒有Flexbox的情況下解決有點棘手。然而，使用的每一個元素上Flexbox，就無需支付任何思想能產生像例如本不想要的結果：

.container { 
 
    height: 500px; 
 
    display:flex; 
 
}

<div class="container"> 
 
<img src="http://via.placeholder.com/350x150"> 
 
</div>

中的代碼片段的圖像歪斜。通過將align-items添加到.container中，您可以很容易地解決這個問題，但問題是，在所有元素上使用flexbox都可能會導致問題，而這些問題並不是必需的。

也就是說，只要您關注要應用的元素，使用flexbox絕對是一件好事。

來源

2017-09-26 15:21:09 Maharkus

他可能不想這樣做，在這種情況下，一個clearfix將是足夠的 – SourceOverflow

是的，clearfix的作品也是。謝謝你的補充。 – Maharkus

感謝@Maharkus的建議。我之前遇到過clearfix，因此必須對此進行一些研究，正如我在上面的評論中提到的，從容器中移除float並不能解決問題，因此，clearfix可能就是答案！ –

部分反覆溢出

回答

相關問題