떠다니는 아이디브를 억지로 포함시키다

떠다니는 아이디브를 억지로 포함시키다

워드프레스에서 20대 테마를 커스터마이즈하려고 합니다.2열 레이아웃은 다음과 같이 설정됩니다.

<div id="main">
     <div id="primary"></div>
     <div id="secondary"></div>
</div>

그리고.

#main {
    clear: both;
    padding: 1.625em 0 0;
}
#primary {
    float: left;
    margin: 0;
    width: 100%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

다른 관련 css 속성이 내부에 있는지 확실하지 않습니다.style.css내가 못 알아봤던 것 같아요.어쨌든, 아역들은 밖에 누워있어#main. 어떻게 하면 아이디브(child div)를 강제로 포함시킬 수 있을까요?#main? (폭을 줄이는 것 외에)#primary(그것은 나에게 영향을 주지 않는다)

를 추가해야 합니다.overflow: auto로.#main:

#main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}

clearfix 메서드는 pseudo-element:after와 함께 사용해야 합니다.이 경우 clear는 아이 뒤에 적용되지 않기 때문입니다.

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

http://jsfiddle.net/zfsjb/

2020 편집:

이제부터는 이 간단한 솔루션도 문제없이 작동합니다.

#main::after {
    content: "";
    display: table;
    clear: both;
}

또한 현재 권장되는 것은::after대신:after다른 의사 문자와 일치합니다.

기부해 보세요width: 100%; position:absolute로.#main.

라이브 데모를 소개합니다.

어떤 경우에는 부모 요소에 최소 높이만 적용하면 됩니다.

언급URL : https://stackoverflow.com/questions/11964696/force-a-div-to-contain-floated-child-divs