부동 문제를 해결하는 CSS 구현
- 零到壹度원래의
- 2018-03-27 16:36:471712검색
먼저 다음 질문에 대해 생각해야 합니다. 왜 float를 지워야 할까요? 작은 데모를 할 때 하위 요소가 떠 있을 때 상위 요소의 배경색이 사라지는 문제가 발생했습니다. 당시의 초보 수준에서는 부모 요소의 배경색이 왜 누락되었는지 몰랐다고 할 수 있습니다. 배경색을 명확하게 설정했으므로 색상 형식이 잘못되었을 수 있습니까? 아니면 브라우저가 호환되지 않고 CSS 해킹인가요? ? ? ? ? ? ? ? 모든 추측은 배경색을 가리키며, 그것은 모두 배경색의 잘못입니다.
왜 float를 클리어해야 할까요?
계속 구덩이에서 고생했는데 답을 얻었네요. 배경색의 잘못은 아니었습니다. 그러나 그 하위 요소입니다. 하위 요소가 부동하면 상위 요소의 높이가 0이 됩니다. 그 이유는 상위 요소가 높이를 설정하지 않고 하위 요소에서 원래 높이를 지원하기 때문입니다. 자식 요소가 부동하는 경우 자식 요소는 문서 흐름에서 벗어나고 부모 요소는 여전히 문서 흐름에 있습니다. 이때 부모 요소의 내용은 아무것도 없으므로 부모 요소의 높이가 원본이 됩니다. (0으로) 설정되지 않은 높이. 상위 요소의 콘텐츠에 부동 소수점이 아닌 요소가 있는 경우 상위 요소의 높이는 이러한 요소의 가장 높은 높이로 지원됩니다. 그림과 같이:
HTML code
<p> <img src="./2.png" alt=""> <img src="./1.png" alt=""> <img src="./1.png" alt=""> </p>플로트가 없는 상황:
HTML code
<p> //此时大图片左浮动，及下图的效果 <img src="./2.png" alt="" style = "float: left;"> <img src="./1.png" alt=""> <img src="./1.png" alt=""> </p>플로팅이 있을 때의 상황: ( 큰 그림 플로트 : 왼쪽, 작은 그림은 변경되지 않음)
은 위의 분석으로 결론을 내릴 수 있습니다. 부동 하위 요소로 인해 상위 요소의 '높이 축소'가 발생합니다.
플로트를 지우는 방법은 무엇인가요?
플로트를 제거하는 방법에는 여러 가지가 있습니다. 현재 플로트를 제거하는 방법에는 약 8가지가 있습니다. 그러나 프로젝트에서 사용되는 경우 가장 일반적인 두 가지 방법이 있습니다. 1. pseudo-class: after; 2. BFC 트리거 1. 상위 요소에 pseudo-class: after
추가 클래스 Clearfix를 추가하고 설정합니다. 의사 클래스: 이 클래스 이후.
보세요! 이것이 플로트를 지우는 첫 번째 방법입니다. 떠다니는 아이템을 제거하는 인기 있는 방법이기도 합니다.<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:after { content: " "; display: block; clear: both; } .a { float: left; } </style></head><body> <p class="container clearfix"> <img src="./2.png" alt=""> <img src="./1.png" alt=""> <img src="./1.png" alt=""> </p> </body> </html>
2. 트리거 BFC
1) BFC란?
BFC(Block Formatting Context)는 웹 페이지의 상자 모델 레이아웃을 위한 CSS 렌더링 모드입니다. 위치 지정 시스템은 일반 문서 흐름에 속합니다. W3C에서 발췌: 부동, 절대 위치 지정 요소, 인라인 블록, 테이블 셀, 테이블 캡션 및 오버플로 값이 표시되지 않는 요소(이 값이 뷰포트에 전달된 경우 제외)가 생성됩니다. 새로운 블록 수준 서식 지정 컨텍스트.
위 인용문은 BFC가 형성되는 방식을 거의 요약합니다. 하지만 더 잘 이해하기 위해 다른 방식으로 재정의해 보겠습니다. BFC는 HTML 상자이며 다음 조건 중 하나 이상을 충족합니다.
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者
inline-flex中的其中一个overflow的值不为visible
2) 如何用BFC清除浮动
粗暴的总结就是让浮动块包含在同一个BFC中加同时（也可以理解为包含块加属性overflow:hidden）。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { overflow: hidden; } .a { float: left; } </style></head><body> <p> <img src="./2.png" alt=""> <img src="./1.png" alt=""> <img src="./1.png" alt=""> </p> </body> </html>
有利也有弊，下面简单指出BFC的缺点：
- display:table可能会产生一些问题
- overflow:scroll可能会显示不必要的滚动条
- float:left将会把元素置于容器的左边，其他元素环绕着它
- overflow:hidden将会剪切掉溢出的元素
위 내용은 부동 문제를 해결하는 CSS 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!