CSS - Clearfix不清除DIV時

.frame { 
 
    width: 1000px; 
 
    position: relative; 
 
} 
 

 
.left { 
 
    float: left; 
 
} 
 

 
.right { 
 
    float: right; 
 
} 
 

 
.pre-left, 
 
.pre-right { 
 
    height: 102px; 
 
    width: 88px; 
 
} 
 

 
.pre-left { 
 
    background-image: url('https://i.stack.imgur.com/BZJJC.png'); 
 
} 
 

 
.pre-right { 
 
    background-image: url('https://i.stack.imgur.com/F2OlY.png'); 
 
    margin-right: -88px; 
 
    margin-top: -30px; 
 
} 
 

 
.pre-mid { 
 
    background-image: url('https://i.stack.imgur.com/KD1SO.png'); 
 
    width: auto; 
 
    display: block; 
 
    height: 30px; 
 
    margin-left: 88px; 
 
} 
 

 
.after-left, 
 
.after-right { 
 
    height: 53px; 
 
    width: 79px; 
 
} 
 

 
.after-left { 
 
    background-image: url('https://i.stack.imgur.com/wml1g.png'); 
 
    margin: 19px 0px -40px -65px; 
 
} 
 

 
.after-right { 
 
    background-image: url('https://i.stack.imgur.com/gDDhD.png'); 
 
    margin: -34px -65px -40px 0; 
 
} 
 

 
.after-mid { 
 
    background-image: url('https://i.stack.imgur.com/Jh00z.png'); 
 
    width: auto; 
 
    display: block; 
 
    height: 53px; 
 
    margin: 19px 0px -19px 14px; 
 
} 
 

 
.group:before, 
 
.group:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.group:after { 
 
    clear: both; 
 
} 
 

 
.group { 
 
    zoom: 1; 
 
    /* For IE 6/7 (trigger hasLayout) */ 
 
    z-index: 100; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    width: calc(100% - 42px); 
 
    margin: 24px 0 24px 13px; 
 
    padding: 30px 35px 0 35px; 
 
    border-left: 17px solid transparent; 
 
    border-right: 17px solid transparent; 
 
    border-image: url("https://i.stack.imgur.com/NXc4d.png") 0% 50%; 
 
    background-image: url("https://i.stack.imgur.com/QczND.jpg"); 
 
    background-size: cover; 
 
    color: #fff; 
 
    z-index: -1; 
 
}

<div class="group frame"> 
 
    <div class="content"> 
 
     <p> du er boos </p> 
 
     <p> du er boos </p> 
 
     <p> du er boos </p> 
 
     <p> du er boos </p> 
 

 
     <div class="group after-group"> 
 
      <span class="left after-left"></span> 
 
      <span class="after-mid"></span> 
 
      <span class="right after-right"></span> 
 
     </div> 
 
    </div> 
 
    <div class="group"> 
 
     <span class="left pre-left"></span> 
 
     <span class="pre-mid"></span> 
 
     <span class="right pre-right"></span> 
 
    </div> 
 

 
</div> 
 
clearfix

我有clearfixing這個頁面的一些問題的工作。

http://haxholm.me/test2.html

我終於得到了一切看起來像我想，但由於某種原因，我不能clearfix的elemtent！我不知道什麼是錯誤的，我試圖尋找不同解決方案的負載 - 沒有在我的情況下工作。

那麼我的問題在這裏？我需要另外一個眼睛來解決這個問題。

來源

2017-07-25 Rasmus Barslund Haxholm

請添加瀏覽器詳細信息。它對我來說似乎很好 –

我正在使用Chrome。還用Edge進行測試。相同的結果 –

永遠不要使用負邊距或填充。 –

這是因爲你的元素.content有一個絕對的位置 - 這意味着父容器（.group）不知道它的高度。

所以它的行爲與預期完全一致 - 我建議製作.content相對和保持頂部邊框爲絕對位置的元素。

來源

2017-07-25 11:02:06

CSS - Clearfix清算股利時

嗨，

一些細微的變化，你的代碼將完美運行不工作。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
     <style> 
     .frame { 
width:1000px; 
position:relative; 
} 

.left { 
float:left; 
} 

.right { 
float:right; 
} 

.pre-left, .pre-right { 
height:102px; 
width:88px; 
} 

.pre-left { 
background-image:url('images/frames_01.png'); 
} 

.pre-right { 
background-image:url('images/frames_04.png'); 
margin-right:-88px; 
margin-top: -30px; 
} 

.pre-mid { 
background-image:url('images/frames_02.png'); 
width:auto; 
display:block; 
height:30px; 
margin-left: 88px; 
} 

.after-left, .after-right { 
height:53px; 
width:79px; 
} 

.after-left { 
background-image:url('images/frames_10.png'); 
margin: 19px 0px -40px -65px; 
} 

.after-right { 
background-image:url('images/frames_13.png'); 
margin:-34px -65px -40px 0; 
} 

.after-mid { 
background-image:url('images/frames_11.png'); 
width:auto; 
display:block; 
height:53px; 
margin:19px 0px -19px 14px; 
} 

.group:before, 
.group:after { 
    content: ""; 
    display: table; 
} 
.group:after { 
    clear: both; 
} 
.group { 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
    z-index:100; 
} 

.content { 
position:absolute; 
background-color:rgba(0,0,0,0.3); 
width: calc(100% - 42px); 
    margin: 24px 0 24px 13px; 
    padding: 30px 35px 0 35px; 
    border-left:17px solid transparent; 
    border-right:17px solid transparent; 
    border-image: url("images/frames_06.png") 0% 50%; 
    background-image:url("images/framebg.jpg"); 
    background-size:cover; 
    color:#fff; 
z-index:-1; 
} 
     .group.frame { 
      position:relative; 
     } 
     .group.frame .content + .group { 
      position: absolute; 
      top: 0px; 
      left: 0; 
      right: 0px; 
     } 
     </style> 
    </head> 
    <body data-gr-c-s-loaded="true" cz-shortcut-listen="true"> 
     <div class="group frame"> 
     <div class="content"> 
      <p> du er boos </p> 
      <p> du er boos </p> 
      <p> du er boos </p> 
      <p> du er boos </p> 
      <div class="group after-group"> 
       <span class="left after-left"></span> 
       <span class="after-mid"></span> 
       <span class="right after-right"></span> 
      </div> 
     </div> 
     <div class="group"> 
      <span class="left pre-left"></span> 
      <span class="pre-mid"></span> 
      <span class="right pre-right"></span> 
     </div> 
     </div> 
     clearfix 
    </body> 
</html>

來源

2017-07-25 11:21:25 Shubham

CSS - Clearfix不清除DIV時

回答

相關問題