CSS 스타일 "float"를 지우는 가장 좋은 방법은 무엇입니까?

CSS 스타일 "float"를 지우는 가장 좋은 방법은 무엇입니까?

---

나는 사용하여 내 수레를 지우는 데 꽤 익숙 <br style="clear:both"/>하지만 물건이 계속 바뀌고 이것이 모범 사례인지 확실하지 않습니다.

div를 지우지 않고도 동일한 결과를 얻을 수 있는 CSS 해킹 (positioneverything에서)이 있습니다. 하지만 ... 그들은 해킹이 약간 구식이라고 주장하며 대신 이 해킹을 살펴보아야 합니다. 하지만 .. 700 페이지의 댓글을 읽은 후 :) 후자의 해킹이 작동하지 않는 곳이있을 수 있습니다.

나는 자바 스크립트가 활성화되어 있는지 여부에 관계없이 내 지우기가 작동하기를 원하기 때문에 자바 스크립트 해킹을 피하고 싶습니다.

브라우저 독립적 인 방식으로 div를 지우는 현재 모범 사례는 무엇입니까?

---

업데이트 : 2014 년에는 @RodrigoManguinho가 언급 한 것과 같은 유사 요소를 활용 한 clearfix 기술을 사용해야합니다. 이것은 수레를 청소하는 현대적인 방법입니다. 최신 방법은 Nicholas Gallagher의 micro clearfix를 참조하세요.

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

원래 답변 :

나는 의미없는 추가 마크 업을 사용하는 것을 정말 좋아하지 않으므로 클리어링 요소를 사용하지 않습니다. 대신 overflow: hidden;플로트의 부모에 적용 하여 지우십시오. 크로스 브라우저에서 작동하며 문제 없습니다. 나는 overflow: auto;또한 작동 한다고 믿습니다 .

분명히 다른 오버플로 속성을 사용하려면 작동하지 않지만 IE6 확장 상자 버그로 인해 의도적으로 컨테이너를 오버플로 할 이유가 거의 없습니다.

추가 마크 업을 추가하지 않으려면 overflow대신 사용에 대한 자세한 정보를 참조하십시오clear .

---

나는 가장 자주 (자신을 포함하여),이 방법이 html에서 사용된다는 것을 발견했습니다.

<div class="clear"></div>

스타일 시트에서 다음과 같이하십시오.

.clear {clear: both;}

---

.clear-fix:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clear-fix
{
    zoom: 1;
}

<div class="clear-fix">
    <div class="left">Some Div With Float</div>
    <div class="left">Another Div With Float</div>
</div>

제 생각에는 이것이 최선의 방법입니다. 추가 DOM 요소 나 오버플로 또는 해킹의 잘못된 사용이 필요하지 않습니다.

---

내가 사용하는 경향이있는 약간의 부두가있다.

<span class="clear"></span> 

span.clear { 
    display: block; 
    clear: both; 
    width: 1px; 
    height: 0.001%;
    font-size: 0px; 
    line-height: 0px; 
} 

이 조합은 모든 브라우저 문제를 마술처럼 고치고, 너무 오랫동안 사용해 왔지만 어떤 문제가 해결되는지 잊었습니다.

---

가장 좋은 방법은 "overflow : auto;"입니다. div 컨테이너에서. 더 깨끗합니다.

div.container {overflow: auto;}

자세한 내용은 http://www.quirksmode.org/css/clearing.html

---

overflow:auto;플로팅 요소를 포함하는 상위 요소에 단순히 추가 하는 것은 대부분의 경우 훌륭한 수정입니다.

샘플 HTML :

<div class="container">
    <div class="child">...</div>
    <div class="another-child">...</div>
<div>

CSS :

.child {
    float: right;
    word-wrap: break-word;
}

.child img {
    max-width: 100%;
    height: auto; /* of course, this is default */
}

.child p {
    word-wrap: break-word;
}

.container {
    overflow: auto;
}

As with any other method, there are some gotchas with overflow:auto; as well. In order to fix them — apply max-width:100%; height: auto; for images, and word-wrap: break-word; for text contained within the floating elements.

[source]

---

jQuery UI has some classes to fix this as well (ui-help-clearfix does something).

Technically <div style="clear:both;"></div> is better than <br style="clear:both;" /> because an empty div will have 0 height, thereby just clearing the floats. The <br /> will leave a space. I see nothing wrong with using the <div/> method.

---

.floatWrapper {
   overflow:hidden;
   width:100%;
   height:100%;
}
.floatLeft {
   float:left;
}


<div class="floatWrapper">
    <div class="floatLeft">
        Hello World!
    </div>
    <div class="floatLeft">
       Whazzzup!
    </div>
</div>

---

The issue is with parent elements not adjusting to the height of its floated child elements. Best method I have found is to float the parent to force it to adjust with the heights of its floated child elements, then apply your css clear to the next element you actually want to clear. It's often necessary to add width:100% too, as without floating the parent may unexpectedly change your layout.

As others have mentioned, its semantically best to avoid markup that is unrelated to your content such as a <br> or <div> with a clearfix class.

---

<div class='float_left'>

something else


<br style="clear:both;">
</div>

this br will not leave a space.

---

<br clear="all"/>

works well aswell. The benefit to this over using class="clear" is that it just works and you don't have to setup extra rules in your css to make it so.

---

Yet another is the "Float nearly everything" whereby you float the parent on the same side as the floated child.

---

I prefer using with .clear { clear: both; } over .clear-fix:after blah blah, because when you look at the markup it's clearer what's happening. Just FYI here's my tutorial on how to use float and clear that I wrote a while ago.

참고URL : https://stackoverflow.com/questions/490184/what-is-the-best-way-to-clear-the-css-style-float