중복으로 표시에도 불구하고

Question

****** 왼쪽 - 다른 질문은 ****** 나 '

을 내 질문에 대답하지 않습니다 왜 그냥 display : inline-block 대신 float : left의 모든 시간을 사용하는지 알기를 원합니다. 인라인 블록은 레이아웃면에서 제어하기 쉽고 부유물을 없애야하는 것과 관련하여 문제가되지 않는 것 같습니다. 나는 왜 다른 것 대신 하나를 사용하는지에 대해 머리를 쓰려고합니다.

많은 감사,

에밀리.

Answer 1

float의 목적은 텍스트를 감싸는 것입니다. 그러면 왼쪽 또는 오른쪽으로 이동하여 페이지 흐름에서 벗어납니다. 다른 텍스트를 포함하는 라인 박스는 떠 다니는 요소와 중첩되는 것을 피합니다. 이것은 블록 수준의 블록 컨테이너를 형성합니다. 다른 콘텐츠와 수직으로 정렬되지 않습니다.

body { 
 
    width:300px; 
 
} 
 
.float-example span { 
 
    float:left; 
 
    width: 100px; 
 
    border:2px dashed red; 
 
}

<section class="float-example">Lorem ipsum dolor sit amet, consectetur 
 
adipiscing elit, <span>I like to use float!</span> sed do eiusmod tempor 
 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</section>

인라인 블록의 목적은 라인 박스 안에 앉는 블록 용기이어야한다. 이는 콘텐츠의 정상적인 흐름 내에서 인라인 수준의 블록 컨테이너를 형성합니다. 수직으로가에있는 줄 상자의 다른 내용과 일치합니다.

body { 
 
    width:300px; 
 
} 
 

 
.inline-block-example span { 
 
    display:inline-block; 
 
    width: 100px; 
 
    border:2px dashed red; 
 
}

<section class="inline-block-example">Lorem ipsum dolor sit amet, consectetur 
 
adipiscing elit, <span>I like to use inline-block!</span> sed do eiusmod tempor 
 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
</section>

Answer 2

가장 큰 차이점은 당신이 수레처럼 인라인 요소를 취소 할 필요가없는 것입니다.

Float은 일반 DOM 흐름에서 요소를 제거하여 내용이이를 감쌀 수 있도록합니다. 이것은 또한 float 조건을 벗어나기 위해 마크 업에서 다음 객체의 float을 지워야 함을 의미합니다.

인라인 블록을 사용하지 않아도됩니다.