curent div에서만 플로트를 제거하는 방법은 무엇입니까?

Question

은 내가 따라와 g의 HTML이 : 클래스

<div class="wrapper"> 
    <div class="left-block"> 
     <p> 
      some text 
     </p> 
    </div> 
    <div class="right-block"> 
     <p> 
      some text 
     </p> 
     <div class="some-block">654</div> 
     <div class="some-block">132</div> 
     <div class="some-block">987</div> 
     <div class="clear"></div> 
     <div class="regular-block">10002</div> 
    </div> 
</div> 

블록을 left-block 및 some-block은이 건물 float:left 클래스 clear와 http://jsfiddle.net/5k5v67jj/ 블록 clear:left;

을 가지고 같은 이것은 내가 블록 regular-block가 좋아하는 수있는 방법을 찾습니다 이 스크린 샷 :

Answer 1

당신은 플로트와 block formatting context의 명확한를 포함해야합니다. 이러한 컨텍스트를 설정하려면 일반적으로 overflow:auto 또는 overflow:hidden을 사용하는 것이 좋습니다. "right-block"클래스를 사용하여 div의 스타일에이를 추가합니다.

http://jsfiddle.net/5k5v67jj/1/

Answer 2

.some-block을 float:left;에서 display:inline;으로 바꿉니다. 이렇게하면 .regular-block과 같은 표준 div가 자동으로 아래에 표시되며 두 div 사이에 명확한 내용이 필요하지 않습니다.

는 그런 다음 블록의 높이를 해결하기 위해 하단에있는 clear 사업부를 넣을 수 있습니다 :

.wrapper{ 
 
    border: 1px solid brown; 
 
} 
 
.left-block{ 
 
    float:left; 
 
    width:100px; 
 
    padding:5px; 
 
    border: 1px solid red; 
 
} 
 
.right-block{ 
 
    margin-left: 112px; 
 
    border: 1px solid green;  
 
    padding:5px; 
 
    padding-bottom:0; 
 
} 
 
.some-block{ 
 
    display:inline; 
 
    border: 1px solid yellow; 
 
} 
 
.regular-block{ 
 
    margin-top:10px; 
 
    border: 1px solid violet; 
 
} 
 
.clear{ 
 
    clear:left; 
 
}

<div class="wrapper"> 
 
    <div class="left-block"> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique, lorem dapibus tristique rhoncus, justo erat volutpat erat, in malesuada enim libero quis metus. Nunc tristique maximus efficitur. Sed nec dolor ut quam consequat molestie id quis justo. 
 
     </p> 
 
    </div> 
 
    <div class="right-block"> 
 
     <p> 
 
      Nunc a lectus enim. Quisque sit amet iaculis turpis, a auctor tortor. Mauris aliquet sapien non odio tempor, auctor gravida nunc commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum eu tellus vel volutpat. Cras sed neque egestas, ullamcorper purus id, viverra odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce et malesuada est, et bibendum lectus. 
 
     </p> 
 
     <div class="some-block">654</div> 
 
     <div class="some-block">132</div> 
 
     <div class="some-block">987</div> 
 
     <div class="regular-block">10002</div> 
 
     <div class="clear"></div> 
 
    </div> 
 
</div