CSS 플로트에 대한 혼란

Question

저는 플로트에 대해 약간 혼란 스럽습니다. 나는 float에 대한 예제를 만들었습니다. http://jsbin.com/pasavifego/edit?html,css,js,output

나는 내 ul의 배경색을 빨간색으로 지정했습니다.

내 모든 리튬이 왼쪽으로 떠있어, 지금 배경색이 보이지 않습니다. 플로트를 제거하면 작동합니다. 누군가 이런 일이 일어난 이유를 설명 할 수 있습니까?

또 다른 질문은 한 div가 부동입니다 : 왼쪽, 내가 다른 div를 추가 할 때, 왜 그 div 옆에 시작합니까?

설명해주세요. 당신이 display: inline 대신 float: left의 사용한다이 경우

감사

Answer 1

참조 참조 스미스의 대답은 수레가 없으면 이것을하는 좋은 방법입니다.

그러나 질문에 대답하기 위해 일어난 일은 <ul>에 높이가 없다는 것입니다. @ j08691의 의견에 따르면 float ed 요소는 컨테이너에서 수직 공간을 차지하지 않습니다. 이 예에서, 두 번째 <ul>은 빨간 선으로 표시됩니다 :

ul { 
 
    outline: 1px solid red 
 
} 
 
.with-floated-lis li { 
 
    float: left 
 
}

<ul> 
 
    <li>not floated</li> 
 
</ul> 
 

 
<ul class="with-floated-lis"> 
 
    <li>floated</li> 
 
<ul> 
 

트릭이 (가) "해킹 clearfix"라고이 문제를 해결하려면 그것은 프론트 엔드 개발에 필수적인 도구입니다 . 당신이 뭔가를 떠 및 그 용기는 부유 요소를 포함하는 수직으로 확장 할 경우, 컨테이너에 clearfix을 적용

.clearfix:before, 
 
.clearfix:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix:after { 
 
    clear: both; 
 
} 
 
ul { 
 
    outline: 1px solid red 
 
} 
 
.with-floated-lis li { 
 
    float: left 
 
}

<ul class="with-floated-lis clearfix"> 
 
    <li>floated, ul has clearfix</li> 
 
</ul>

니콜라스 갤러거는 clearfix 썼다. 그의 게시물은 여기에 http://nicolasgallagher.com/micro-clearfix-hack/입니다. 여기에 clearfix와 floats에 대해 더 알아보기 https://css-tricks.com/snippets/css/clear-fix/

Answer 2

예는

그리고 떠 요소에 좋은 시작 설명은 https://jsfiddle.net/kvb5hb6f/7/는 아담 - buchanan- @ 여기 http://www.hongkiat.com/blog/css-floats/#What_happens_to_an_element_when_it_floats

li{ 
display:inline; 
list-style:none; 
}