clearfix'의 어떤 방법을 사용할 수 있습니까?
로 고민하고 있습니다.div2열 레이아웃을 래핑합니다. 내 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠdiv내용 및 사이드바를 줄바꿈하지 못했습니다.
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
Firefox에는 일반 버그를 수정하는 여러 가지 방법이 있는 것 같습니다.
<br clear="all"/>overflow:autooverflow:hidden
내 상황에서, 제대로 작동하는 것으로 보이는 유일한 것은<br clear="all"/>해결책, 약간 엉성합니다. overflow:auto 스크롤바, 내게끔스를바주고롤크한그, 리고찍▁me고▁gives▁nasty,주.overflow:hidden분명히 부작용이 있을 것입니다.또한 IE7은 잘못된 동작으로 인해 이 문제를 겪지 않을 것으로 보이지만, 제 상황에서는 Firefox와 동일하게 문제를 겪고 있습니다.
현재 사용 가능한 방법 중 가장 강력한 것은 무엇입니까?
생산되는 설계에 따라 아래의 clearfix CSS 솔루션은 각각의 이점이 있습니다.
clearfix는 유용한 응용 프로그램을 가지고 있지만 해킹으로도 사용되어 왔습니다.명확한 수정을 사용하기 전에 다음과 같은 최신 CSS 솔루션이 유용할 수 있습니다.
최신 Clearfix 솔루션
이 있는 overflow: auto;
부동 요소를 지우는 가장 간단한 방법은 스타일을 사용하는 것입니다.overflow: auto포함 요소에 있습니다.이 솔루션은 모든 최신 브라우저에서 작동합니다.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
한 가지 단점은 외부 요소에 여백과 패딩의 특정 조합을 사용하면 스크롤 막대가 나타날 수 있지만 요소를 포함하는 다른 부모에 여백과 패딩을 배치하여 해결할 수 있습니다.
'hidden'을 사용하는입니다. 'overflow: hidden'을 사용합니다.hidden포함 요소 외부에 위치한 모든 콘텐츠를 자릅니다.
참고: 플로팅 요소는img이 예에서는 태그이지만 HTML 요소일 수 있습니다.
Clearfix 다시 로드됨
CSS Mojo의 티에리 코블렌츠는 다음과 같이 썼습니다.가장 최근의 지우기 수정이 다시 로드되었습니다.그는 오래된 것에 대한 지지를 떨어뜨림으로써IE, 솔루션을 하나의 css 문으로 단순화할 수 있습니다.추가로, 사용display: block)로 표시됨)display: table 있는 요소일 때될 수 있습니다.)을 사용하면 명확한 수정이 있는 요소가 형제 요소일 때 여백이 제대로 접힐 수 있습니다.
.container::after {
content: "";
display: block;
clear: both;
}
이것은 클리어 픽스의 가장 최신 버전입니다.
⋮
⋮
이전 Clearfix 솔루션
다음 솔루션은 최신 브라우저에 필요하지 않지만 이전 브라우저를 대상으로 하는 데 유용할 수 있습니다.
이러한 솔루션은 브라우저 버그에 의존하므로 위의 솔루션 중 사용자에게 적합한 솔루션이 없는 경우에만 사용해야 합니다.
그것들은 대략적으로 연대순으로 나열되어 있습니다.
"Beat That ClearFix", 최신 브라우저를 위한 명확한 수정 사항
CSS Mojo의 Tierry Koblentz'는 현대적인 브라우저를 목표로 할 때, 우리는 이제 그것을 포기할 수 있다고 지적했습니다.zoom그리고.::before속성/값 및 단순 사용:
.container::after {
content: "";
display: table;
clear: both;
}
이 솔루션은 IE 6/7을 일부러 지원하지 않습니다!
티에리는 또한 다음과 같이 제안합니다. "주의 사항: 만약 당신이 새로운 프로젝트를 처음부터 시작한다면, 그것을 위해 노력하되, 당신이 오래된 것을 지지하지 않더라도 이 기술을 지금 있는 것과 바꾸지 마세요.IE, 귀사의 기존 규칙은 마진 감소를 방지합니다."
마이크로 클리어픽스
가장 최근에 전 세계적으로 채택된 클리어 픽스 솔루션인 니콜라스 갤러거의 마이크로 클리어 픽스.
알려진 지원:Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
오버플로 속성
이 기본적인 방법은 배치된 내용이 용기의 범위 밖에 표시되지 않는 일반적인 경우에 선호됩니다.
http://www.quirksmode.org/css/clearing.html - 이 기술과 관련된 일반적인 문제, 즉 컨테이너 설정을 해결하는 방법을 설명합니다.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
다것보를 사용하는 보다.displayIE에 대해 "hasLayout"을 설정하는 속성, 요소에 대해 "hasLayout"을 트리거하는 데 다른 속성을 사용할 수 있습니다.
.container {
overflow: hidden;
zoom: 1;
display: block;
}
다음을 사용하여 부동액을 제거하는 다른 방법overflow속성은 밑줄 해킹을 사용하는 것입니다.IE는 밑줄 앞에 붙은 값을 적용하지만 다른 브라우저는 적용하지 않습니다.그zoom속성 트리거: IE에서 hasLayout:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
이게 효과가 있는 동안...해킹을 사용하는 것은 이상적이지 않습니다.
PIE: 간편 삭제 방법
이 오래된 "이지 클리어" 방법은 더 까다로운 CSS를 희생하면서 배치된 요소가 컨테이너의 경계 밖에 매달릴 수 있다는 장점이 있습니다.
이 솔루션은 꽤 오래되었지만 위치 정보를 쉽게 삭제하는 방법에 대해 모두 배울 수 있습니다. http://www.positioniseverything.net/easyclearing.html
지우기 특성을 사용하는 요소
무언가를 빠르게 통합할 때 사용할 수 있는 빠르고 더러운 솔루션(몇 가지 단점 있음):
<br style="clear: both" /> <!-- So dirty! -->
단점
- 응답하지 않으므로 미디어 쿼리에 따라 레이아웃 스타일이 변경될 경우 원하는 효과를 제공하지 못할 수 있습니다.순수한 CSS의 솔루션이 더 이상적입니다.
- 의미적인 가치를 추가하지 않고도 HTML 마크업을 추가할 수 있습니다.
- CSS의 "clearfix" 단일 솔루션에 대한 클래스 참조와 HTML의 클래스 참조 대신 각 인스턴스에 대한 인라인 정의와 솔루션이 필요합니다.
- 다른 사람들이 코드를 해결하기 위해 더 많은 해킹을 작성해야 할 수도 있기 때문에 코드를 사용하는 것이 어렵습니다.
- 솔루션이는 다시 매번
<br style="clear: both" />태그가 마크업 주위에 흩어져 있습니다.
우리가 해결하고자 하는 문제는 무엇입니까?
물체를 띄울 때 두 가지 중요한 고려 사항이 있습니다.
하위 플로트를 포함합니다.이것은 문제의 요소가 떠다니는 모든 후손들을 감쌀 수 있을 정도로 스스로를 높이 만든다는 것을 의미합니다. (그들은 밖에서 매달리지 않습니다.)
외부로부터 후손들을 단열하는 것은 부유합니다.즉, 요소 내부의 하위 요소가 다음을 사용할 수 있어야 합니다.
clear: both요소 외부의 부유물과 상호 작용하지 않도록 합니다.
블록 형식 컨텍스트
이 두 가지를 모두 수행할 수 있는 방법은 하나뿐입니다.그것은 새로운 블록 포맷 컨텍스트를 구축하는 것입니다.블록 형식 컨텍스트를 설정하는 요소는 플로트가 서로 상호 작용하는 절연된 사각형입니다.블록 형식 지정 컨텍스트는 항상 부동 하위 항목을 시각적으로 래핑할 수 있을 정도의 높이이며, 블록 형식 지정 컨텍스트 외부의 어떤 플로트도 내부 요소와 상호 작용할 수 없습니다.이 양방향 단열재가 바로 당신이 원하는 것입니다.IE에서 이와 같은 개념을 hasLayout이라고 하며, 다음을 통해 설정할 수 있습니다.zoom: 1.
콘텍스트를 은 여러 , 제가 은 블록컨형설방정는여법있가지만은러, 입니다.display: inline-block와 함께width: 100%(물론 사용 시 일반적인 주의 사항도 있습니다.width: 100%그래서 사용합니다.box-sizing: border-box또는 놓음padding,margin,그리고.border(다른 요소에서).
가장 강력한 솔루션
플로트의 가장 일반적인 적용은 두 개의 열 레이아웃입니다. (세 개의 열로 확장할 수 있습니다.)
먼저 마크업 구조입니다.
<div class="container">
<div class="sidebar">
sidebar<br/>sidebar<br/>sidebar
</div>
<div class="main">
<div class="main-content">
main content
<span style="clear: both">
main content that uses <code>clear: both</code>
</span>
</div>
</div>
</div>
그리고 이제 CSS.
/* Should contain all floated and non-floated content, so it needs to
* establish a new block formatting context without using overflow: hidden.
*/
.container {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
/* Fixed-width floated sidebar. */
.sidebar {
float: left;
width: 160px;
}
/* Needs to make space for the sidebar. */
.main {
margin-left: 160px;
}
/* Establishes a new block formatting context to insulate descendants from
* the floating sidebar. */
.main-content {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
직접 해보세요.
JS Bin으로 이동하여 코드를 가지고 놀면서 이 솔루션이 처음부터 어떻게 구축되는지 확인하십시오.
유해한 것으로 간주되는 기존의 클리어 픽스
기존의 명확한 수정 솔루션의 문제는 두 가지 렌더링 개념을 사용하여 IE와 다른 모든 사용자에게 동일한 목표를 달성한다는 것입니다.IE에서 그들은 새로운 블록 포맷 컨텍스트를 설정하기 위해 hasLayout을 사용하지만, 다른 모든 사람들은 생성된 박스를 사용합니다.:after)와 함께clear: both새 블록 형식 컨텍스트를 설정하지 않습니다.이것은 모든 상황에서 상황이 똑같이 작동하지 않는다는 것을 의미합니다.이것이 잘못된 이유에 대한 설명은 Clearfix에 대해 알고 있는 모든 것이 잘못되었음을 참조하십시오.
이누이트.css와 부르봉이 사용하는 최신 표준 - 매우 널리 사용되고 잘 유지되는 CSS/Sass 프레임워크 두 가지:
.btcf:after {
content:"";
display:block;
clear:both;
}
메모들
클리어 픽스는 기본적으로 플렉스박스 레이아웃이 훨씬 쉽고 스마트한 방식으로 제공할 수 있는 해킹이라는 것을 명심하십시오. CSS 플로트는 원래 그리드 레이아웃 등이 아니라 긴 텍스트 기사의 이미지처럼 인라인 콘텐츠가 흐르도록 설계되었습니다.특별히 이전 제품(Edge가 아닌)을 대상으로 하지 않는 한Internet Explorer(인터넷 익스플로러)에서는 대상 브라우저가 플렉스박스를 지원하므로 학습할 가치가 있습니다.
이것은 IE7을 지원하지 않습니다.IE7을 지원하면 안 됩니다.이렇게 하면 사용자가 고정되지 않은 보안 악용에 계속 노출되고 다른 모든 웹 개발자의 삶이 더 어려워집니다. 사용자와 조직이 더 안전한 최신 브라우저로 전환해야 하는 부담이 줄어들기 때문입니다.
이 명확한 수정 사항은 2012년 7월 티에리 코블렌츠에 의해 발표되고 설명되었습니다.그것은 Nicolas Gallagher의 2011년 마이크로 클리어 픽스에서 불필요한 무게를 뺍니다.이 과정에서 사용자가 사용할 수 있도록 유사 요소를 해제합니다.사용하도록 업데이트되었습니다.display: blockdisplay: table(다시, 티에리 코블렌츠에게 공을 돌립니다.)
http://html5boilerplate.com/ 에서 가져온 다음을 사용할 것을 권장합니다.
/* >> The Magnificent CLEARFIX << */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
오버플로 속성을 사용하여 추가 마크업 없이 플로트를 지울 수 있습니다.
.container { overflow: hidden; }
이것은 IE6을 제외한 모든 브라우저에서 작동합니다. 여기서 hasLayout(확대/축소는 내가 선호하는 방법)을 활성화하기만 하면 됩니다.
.container { zoom: 1; }
http://www.quirksmode.org/css/clearing.html
CLEARFIX-Method에서 버그를 DOT에 글꼴 크기가 없습니다.그리고 만약 당신이 그것을 설정한다면.height = 0그리고 DOM 트리의 첫 번째 요소는 "클리어 픽스" 클래스를 가지고 있습니다. 항상 페이지 하단에 12px의 여백이 있습니다. :)
다음과 같이 수정해야 합니다.
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
이제는 YAML-Layout의 일부가 되었습니다.그것을 한번 보세요 - 그것은 매우 흥미롭습니다!http://www.yaml.de/en/home.html
이것은 꽤 깔끔한 해결책입니다.
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+에서 작동하는 것으로 알려져 있습니다.
:before 선택기를 포함하여 플로트를 지울 필요는 없지만 최신 브라우저에서 상단 여백이 축소되는 것을 방지합니다.이렇게 하면 줌:1을 적용할 때 IE 6/7과 시각적으로 일관성이 유지됩니다.
출처: http://nicolasgallagher.com/micro-clearfix-hack/
부트스트랩에서 픽스 지우기:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
그냥 사용해요 :-
.clear:after{
clear: both;
content: "";
display: block;
}
IE8+와 가장 잘 호환됩니다 :)
내가 게시하지 않을 엄청난 양의 답장을 고려할 때.하지만, 이 방법은 나에게 도움이 되었듯이 누군가에게 도움이 될 수도 있습니다.
가능한 한 부유물에서 멀리 떨어져 있어야 합니다.
언급할 가치가 있습니다. 저는 에볼라와 같은 부유물을 피합니다.많은 이유가 있고 나는 혼자가 아닙니다. 리쿠도를 읽으세요. 무엇이 확실한 해결책인지에 대한 대답을 하면 제 말이 무슨 뜻인지 알 수 있을 것입니다.그 자신의 말로:...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...
부유물 외에도 다른 좋은 (때로는 더 나은) 옵션들이 있습니다.기술이 발전하고 발전함에 따라 플렉스박스(및 기타 방법)가 널리 채택될 것이며 플로트는 단지 나쁜 기억이 될 것입니다.아마도 CSS4?
플로트 오작동 및 삭제 실패
먼저, 때때로 여러분은 생명 보호기에 구멍이 나고 HTML 흐름이 가라앉기 시작할 때까지 부유물로부터 안전하다고 생각할 수 있습니다.
아래의 코드펜 http://codepen.io/omarjuvera/pen/jEXBya 에서 플로트를 클리어하는 관행은<div classs="clear"></div>(또는 다른 요소)는 일반적이지만 눈살을 찌푸리고 반덤핑합니다.
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
div {
border: 1px solid #f00;
width: 200px;
height: 100px;
}
div.floated {
float: left;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
하지만, 당신이 당신의 보트가 항해할 가치가 있다고 생각했을 때... 쾅!화면 크기가 점점 작아질수록 아래 그림과 같은 이상한 동작이 나타납니다(같은 http://codepen.io/omarjuvera/pen/jEXBya) :
왜 신경써야 합니까?대략 사용되는 장치의 약 80%(또는 그 이상)는 작은 화면을 가진 모바일 장치입니다.데스크톱 컴퓨터/노트북이 더 이상 사용되지 않습니다.
그것은 거기서 끝나지 않습니다.
플로트의 문제는 이것뿐만이 아닙니다.많은 것들이 있지만, 이 예에서, 어떤 사람들은 다음과 같이 말할 수 있습니다.all you have to do is to place your floats in a container하지만 코드펜과 그래픽에서 볼 수 있듯이, 그것은 사실이 아닙니다.그것은 분명히 상황을 최악으로 만들었습니다.
HTML
<div id="container" class="">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
#container {
min-height: 100px; /* To prevent it from collapsing */
border: 1px solid #0f0;
}
.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
결과는?
그것은 ***와 같습니다! 
적어도 당신은 CSS 파티를 시작할 것이고, 모든 종류의 셀렉터와 속성을 파티에 초대할 것입니다; 당신이 시작한 것보다 당신의 CSS를 더 엉망으로 만들 것입니다.당신의 부유물을 고치려고요.
구조에 대한 CSS Clearfix.
이 간단하고 매우 적응력이 뛰어난 CSS는 아름다움이자 "구세자"입니다.
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
바로 그거야!의미론을 깨트리지 않고 정말 작동합니다. 제가 작동한다고 언급했나요?:
같은 샘플에서...HTML
<div class="clearfix">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div>
<section>Below</section>
CSS
div.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
section {
border: 4px solid #00f;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
이제 우리는 더 이상 필요하지 않습니다.<div classs="clear"></div> <!-- Acts as a wall -->그리고 의미 경찰을 행복하게 해줍니다.이점은 이뿐만이 아닙니다.이 클리어 픽스는 다음을 사용하지 않고 모든 화면 크기에 대응합니다.@media가장 간단한 형태로.다시 말해서, 그것은 여러분의 플로트 용기를 견제하고 홍수를 예방할 것입니다.의 작은 =) 지으로막마브오하나를라작의은가라조모각두로으지테원다니합저래우된)=▁lastly모지다▁all원두▁browsers니=)
여기 다시 명확한 해결책이 있습니다.
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
저는 항상 그리드의 주요 섹션을 띄우고 지원합니다.clear: both;수업을로 하지 .그것은 추가적인 디바 수업을 필요로 하지 않습니다.
솔직히, 모든 솔루션은 렌더링 버그를 수정하기 위한 해킹인 것 같습니다. 제가 틀렸나요?
찾았요를 찾았습니다.<br clear="all" />가장 쉽고, 단순하게 말입니다.보고있습니다class="clearfix"모든 곳에서 외부적인 화장 요소에 반대하는 사람의 감성을 쓰다듬을 수는 없습니다, 그렇죠?당신은 단지 다른 캔버스에 문제를 그리고 있을 뿐입니다.
저는 또한 그것을 사용합니다.display: hidden솔루션은HTML 이 필요하지 않습니다... 예쁜 리본과 와 같은 합니다. 과 같은 말입니다. 그러나 때때로 예쁜 리본과 새시와 같은 컨테이너를 넘치게 하는 요소가 필요합니다.
.clearFix:after {
content: "";
display: table;
clear: both;
}
새 표시 값이 작업에 한 줄로 표시됩니다.
display: flow-root;
W3 규격에서: "요소는 블록 컨테이너 상자를 생성하고 흐름 레이아웃을 사용하여 내용을 레이아웃합니다.항상 컨텐츠에 대한 새로운 블록 형식 컨텍스트를 설정합니다."
정보: https://www.w3.org/TR/css-display-3/ #valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136
※위 링크에 나와 있는 것처럼 현재 지원이 제한되어 있으므로 아래와 같은 지원을 사용할 수 있습니다. https://github.com/fliptheweb/postcss-flow-root
SAS의 경우 명확한 해결책은 다음과 같습니다.
@mixin clearfix {
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
*zoom: 1;
}
다음과 같이 사용됩니다.
.container {
@include clearfix;
}
새 지우기 수정을 원하는 경우:
@mixin newclearfix {
&:after {
content:"";
display:table;
clear:both;
}
}
LESS(http://lesscss.org/), 를 사용하면 편리한 클리어 픽스 도우미를 만들 수 있습니다.
.clearfix() {
zoom: 1;
&:before {
content: '';
display: block;
}
&:after {
content: '';
display: table;
clear: both;
}
}
그런 다음 문제가 있는 용기와 함께 사용합니다. 예:
<!-- HTML -->
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
/* LESS */
div#container {
.clearfix();
}
용사를 합니다.overflow:hidden/auto플로팅 컨테이너에 상위 요소가 있는 경우 ie6의 높이로 충분합니다.
아래에 명시된 HTML이 플로트를 클리어하기 위해 #test 중 하나가 작동할 수 있습니다.
#test {
overflow:hidden; // or auto;
_height:1%; forces hasLayout in IE6
}
<div id="test">
<div style="floatLeft"></div>
<div style="random"></div>
</div>
이것이 i6에서 작동하지 않는 경우에는 부모를 float(플로트) 해제하도록 float(플로트)만 하십시오.
#test {
float: left; // using float to clear float
width: 99%;
}
아직 다른 종류의 청소가 필요한 적은 없습니다.아마도 이것이 제가 HTML을 쓰는 방식일 것입니다.
는 이 해결책을 , 저는이모솔시을보데았도는다, ▁be▁big▁added▁i,▁to다것에 큰 마진이 추가될 것입니다.<html>아래 코드를 사용하면 요소가 자동으로 표시됩니다.
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
마지막으로 마진 문제를 추가하여 해결했습니다.font-size: 0;위의 CSS로.
뜨겠요 뜬다.#content또한 두 열 모두 플로트를 포함하는 방식입니다.또한 내부의 요소를 제거할 수 있기 때문입니다.#content사이드 바를 제거하지 않고.
래퍼의 경우와 마찬가지로 두 열을 랩할 블록 형식 컨텍스트로 만들어야 합니다.
이 문서에서는 사용할 수 있는 몇 가지 트리거, 즉 블록 형식 컨텍스트에 대해 설명합니다.
명확한 수정은 요소가 자동으로 삭제되므로 추가 마크업을 추가할 필요가 없습니다.
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.cleaner {
clear: both;
}
일반적으로 다음과 같은 작업을 수행해야 합니다.
<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->
명확한 수정 사항을 사용하면 다음 작업만 수행할 수 있습니다.
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
왜 HTML의 한 줄이 하는 일을 하기 위해 css hack을 사용하려고 합니까?그리고 왜 시맨틱 html 튜터 브레이크를 사용하여 라인으로 돌아가지 않습니까?
폼을 사용하는 것이 더 좋습니다.
<br style="clear:both" />
그리고 만약 당신이 HTML에 어떤 스타일도 원하지 않는다면 당신은 휴식을 위해 클래스를 사용하고 그것을 넣기만 하면 됩니다..clear { clear:both; }당신의 CSS에.
이점:
- 행으로 돌아가기 위한 html의 의미론적 사용
- CSS 로드가 없으면 작동합니다.
- 추가 CSS 코드 및 Hack이 필요하지 않습니다.
- CSS로 br을 시뮬레이션할 필요가 없습니다. 이미 HTML에 존재합니다.
다음 HTML 구조를 사용한다고 가정합니다.
<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
제가 사용할 CSS는 다음과 같습니다.
div#container {
overflow: hidden; /* makes element contain floated child elements */
}
div#content, div#sidebar {
float: left;
display: inline; /* preemptively fixes IE6 dobule-margin bug */
}
저는 이 세트를 항상 사용하며 IE6에서도 잘 작동합니다.
다른 클리어 픽스와 달리 컨테이너가 없는 개방형 픽스가 있습니다.
은 부유 가 잘 것이 합니다.<div>반대로, 콘텐츠와 마크업의 명확한 분리는 이 문제에 대한 엄격한 CSS 솔루션을 필요로 합니다.
플로트의 끝을 표시해야 한다는 사실만으로도 무인 CSS 타이핑을 허용하지 않습니다.
후자가 목표인 경우 "명백한 수정"이 발생할 때까지 플로트를 모든 항목(문단, 순서가 지정되지 않은 목록 등)이 감싸도록 열어 두어야 합니다.예를 들어, clearfix는 새 제목으로 설정할 수 있습니다.
이것이 제가 새 제목에 다음과 같은 명확한 수정을 사용하는 이유입니다.
h1 {
clear: both;
display: inline-block;
width: 100%;
}
이 솔루션은 문제를 해결하기 위해 웹 사이트에서 광범위하게 사용됩니다.플로팅된 축소판 옆의 텍스트는 짧으며 다음 지우기 개체의 맨 위 여백은 존중되지 않습니다.
또한 사이트에서 PDF를 자동으로 생성할 때 수동 작업을 방지합니다.여기 예제 페이지가 있습니다.
저는 항상 마이크로 클리어 픽스를 사용합니다.
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
*/
.cf {
*zoom: 1;
}
Cascade Framework에서는 블록 레벨 요소에 기본적으로 적용하기도 합니다.IMO는 블록 레벨 요소에 기본적으로 적용하여 블록 레벨 요소의 기존 동작보다 직관적인 동작을 제공합니다.또한 Cascade Framework(IE6-8 및 최신 브라우저를 지원함)에 이전 브라우저에 대한 지원을 훨씬 쉽게 추가할 수 있었습니다.
이것을 CSS에 넣을 수도 있습니다.
.cb:after{
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
*:first-child+html .cb{zoom: 1} /* for IE7 */
클래스 "cb"를 상위 div에 추가합니다.
<div id="container" class="cb">
원래 코드에 다른 것을 추가할 필요가 없습니다...
#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}<div id="container">
<div id="content">text 1 </div>
<div id="sidebar">text 2</div>
<div class="clear"></div>
</div>사용해 보셨습니까?
<div style="clear:both;"/>
저는 이 방법에 아무런 문제가 없었습니다.
내가 가장 좋아하는 방법은 아래와 같이 css/scss 문서에 clearfix 클래스를 만드는 것입니다.
.clearfix{
clear:both;
}
그런 다음 아래와 같이 내 html 문서에서 호출합니다.
<html>
<div class="div-number-one">
Some Content before the clearfix
</div>
<!-- Let's say we need to clearfix Here between these two divs --->
<div class="clearfix"></div>
<div class="div-number-two">
Some more content after the clearfix
</div>
</html>
div 요소 내부에서 float 속성을 사용할 때 문제를 해결하는 것은 매우 간단합니다.두 div 요소를 float:left로 사용하고 다른 요소를 float:right로 사용하면 두 div 요소의 부모에 대해 clearfix를 사용할 수 있습니다.clearfix 사용을 거부할 경우 아래 내용으로 불필요한 공간을 채우면 사이트 구조가 깨집니다.
언급URL : https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use
'codememo' 카테고리의 다른 글
| mongo의 명령줄 인증 실패 (0) | 2023.06.02 |
|---|---|
| Gemfile.lock 파일 이해 (0) | 2023.06.02 |
| ARC로? ARC로?장점과 단점은 무엇입니까? (0) | 2023.06.02 |
| 오토매퍼: "나머지는 무시하세요"? (0) | 2023.06.02 |
| 앱에 대한 푸시 알림 설정 재설정 (0) | 2023.06.02 |