clearfix를 통해 해제

나는 이렇게 하고 싶다!

> 예

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content">
    <div id="left">left</div>
    <div id="right">right</div>
</div>
</body>
</html>

CSS는 이런 느낌이에요.

@charset "UTF-8";

.content{
    width: 600px;
    height: auto;
    border: 3px solid #ED1A3D;
}
#left{
    width: 100px;
    height: 200px;
    float: left;
    border: 3px solid #fff000;
}
#right{
    width: 488px;
    height: 200px;
    float: left;
    border: 3px solid #000ddd;
}

하지만 이렇게 됐어요.

그것은

flat 속성에 지정된 상자 띄우기
통상적인 상자의 흐름에서 떼어졌다.왜냐면
정상적인 절차에서 벗어난 상자 때문에 부모 상자의 높이를 식별할 수 없습니다
높이에 따라 영역이 결정되는 배경은 표시되지 않습니다.

해결책

부동 심볼을 둘러싼 부모 요소div에clearfix를 추가합니다.

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content clearfix">
    <div id="left">left</div>
    <div id="right">right</div>
</div>
</body>
</html>

clearfix는 위조원소 애프터와 콘텐츠 속성을 함께 사용합니다
상자의 끝에 새 내연 상자가 생성됩니다.

@charset "UTF-8";

.content{
    width: 600px;
    height: auto;
    border: 3px solid #ED1A3D;
}
#left{
    width: 100px;
    height: 200px;
    float: left;
    border: 3px solid #fff000;
}
#right{
    width: 488px;
    height: 200px;
    float: left;
    border: 3px solid #000ddd;
}

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

.clearfix { display: inline-table; }

애프터로 생성된 상자에서
display: Block과clear:both를 설정할 때 div.clear와 같습니다.

이런 느낌.

이와 같은 상태↑↓

최근clearfix: 마이크로clearfix

clearfix의 단축판입니다.
전선이 짧아서 좋네요.

.cf:before,
.cf:after{
  content:"";
  display: table;
}
.cf:after{
  clear:both;
}
/*IE6,7対策 （haslayout対策）*/
.cf{
  *zoom:1;
}

브라우저 지원

・IE7+
• Firefox/chrome 최신 버전
(14/08/18 기준)
이상은 정상적인 배치를 확인했습니다.
IE6면 조금 붕괴될 거야.

오버플로우를 통해 해제

오버플로우도 해제 가능합니다.
flat의 부모 요소를 해제하고 싶습니다.
overflow:visible;다른 값을 설정하면 해제할 수 있습니다.

오버플로우를 통해 해결

학급 설립(.overflow h)

@charset "UTF-8";

.content{
    width: 600px;
    height: auto;
    border: 3px solid #ED1A3D;
}
#left{
    width: 100px;
    height: 200px;
    float: left;
    border: 3px solid #fff000;
}
#right{
    width: 488px;
    height: 200px;
    float: left;
    border: 3px solid #000ddd;
}

.overflow_h{
    overflow: hidden;
    zoom: 1;  /* IE6,7対策 */
}

}flat의 부모 요소에 클래스 추가

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content overflow_h">
        <div id="left">left</div>
        <div id="right">right</div>
</div>
</body>
</html>

오버플로우 고려 사항

부동원소overflow:visible;,clearfix를 사용합니다.
또한, 인쇄할 때 오버플로우로 플랫 clear로 만든 것을 끊을 것 같으니 주의해야 한다.

Reference

이 문제에 관하여(flat 해제 수법의clearfix & 마이크로clearfix &overflow), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rico/items/03fb4c0ffa57fcf0aa17

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다