CSS의 float에 대한 자세한 설명
- 高洛峰원래의
- 2017-03-17 12:47:111800검색
float은 아마도 CSS3 이전에는 웹 페이지 레이아웃에서 가장 일반적으로 사용되는 속성이었을 것입니다. 서로 동의하지 않을 때 float되는 코드를 자주 볼 수 있으니 좀 더 자세히 살펴보겠습니다. 이 반 천사에 악마 속성의 반이 들어있습니다.
본 글은 Zhang Xinxu의 MOOC 홈페이지에서 float 영상을 읽은 후 요약 및 일부 확대된 사용법입니다. 이 영상은 처음 읽으면 지루하지만, 주의 깊게 읽으면 더욱 지루해질 것입니다. . . . . . 그러나 함정을 만난 뒤 다시 읽으면 한 마디 한 마디가 귀한 양심 영상을 발견하게 된다. 더 이상 고민하지 말고 지금 시작해 보겠습니다.
1.float의 기원
float의 원래 디자인은 텍스트에 대한 감싸기 효과를 만드는 것이었습니다. 디자이너가 뭔가를 만들자고 했어요.
2.float 매개변수
float 속성에는 세 가지 매개변수가 있습니다.
left: 요소가 부동임을 나타냅니다. 왼쪽에.
right: 요소가 오른쪽으로 떠 있음을 나타냅니다.
없음: 개체 는 부동하지 않고 표준 문서 흐름을 따릅니다.
3.효과 표시 (float: 왼쪽을 예로 들면, float: 오른쪽의 경우는 위치의 차이일 뿐입니다)
<style> p{
height: 20px;}
.d1{
width: 50px;
background: hsl(100,50%,80%);
}
.d2{float: left;
width: 100px;
background: hsl(150,50%,80%);
}
.d3{
width: 250px;
height: 100px;
background: hsl(10,50%,80%);
}
.d4{float: left;
width: 300px;
background: hsl(250,50%,80%);
}
span{
margin-right: 3px;
border-right: solid 1px #ccc;
background-color: hsl(60,50%,80%);
}
.s3{
float:left;
}</style> <body> <p class="d1">p1</p><p class="d2">p2有float</p><p class="d3">p3</p><span class="s1">span1</span><span class="s2">span2</span><span class="s3">span3有float</span><p class="d4">p4有float</p><span class="s4">span4 </span></body>
브라우저 너비가 충분하지 않은 경우:
브라우저 너비가 충분히 긴 경우 :
다음과 같은 결론을 내릴 수 있습니다.
플로팅 요소가 블록 요소인 경우, 그 다음 인접 요소(플로팅이 아님)는 블록 요소입니다. 플로팅 요소와 겹치고 플로팅 요소가 맨 위에 오게 됩니다. 다음 인접 요소가 인라인 요소 인 경우 부동 요소를 따릅니다.
플로팅된 요소가 인라인 요소인 경우 블록 요소인 경우 다음 인접 요소(플로팅 아님)는 이동하지 않지만 너비가 충분하지 않으면 겹쳐집니다. 다음 인접 요소가 인라인 요소인 경우 부동 요소를 따릅니다.
4.플로팅의 파괴성
플로팅으로 설정된 요소는 문서 흐름에서 벗어나 상위 요소의 높이가 "축소"됩니다.
5.플로트 포장
플로트가 없는 p입니다
입니다. a p with float
6. 공백을 제거하는 Float
이것은 이미 위의 코드와 결론에 나와 있습니다. 일반적인 문서 흐름에서는 기본적으로 두 개의 인라인 요소 사이와 상단과 하단 사이에 간격이 있습니다. 플로팅을 사용하면 이 간격을 없애 두 요소를 원활하게 결합할 수 있으며 상단과 하단 사이의 간격도 정리할 수 있습니다. .
7.1 사용클리어속성
a. <p style="clear:both;"></p>을 상위 태그의 마지막 하위 태그로 배치하는 것도 플로팅을 지우는 가장 간단한 방법이지만 권장되지는 않습니다.
b.after伪元素和zoom
after，就是指标签的最后一个子元素的后面。因此我们可以用CSS代码生成一个具有clear属性的元素
<style>.myp{
border:3px dashed #ddd }
.myp:after{
content: "";
clear:both;
display: block;
}</style><body><p class="myp">
<p style="float:left">我设置了float属性</p></p></body>
但是ie6/7无法识别伪元素after，就得用zoom方式，例：
.myp{
border:3px dashed #ddd;
zoom:1
}
7.2
给父元素添加浮动，或者overflow:hidden,position:absolute等可以使元素BFC化的属性，下节单独探讨BFC的生成条件和布局规则，例：
<style>
.myp{
border:3px dashed #ddd;
overflow: hidden;
}</style> <body> <p class="myp">
<p style="float:left">我设置了float属性</p></p></body>
关于float的布局以及清除影响就先到这了，有遗漏和错误的地方欢迎指正，下节来一起看看BFC到底是什么，他是如何布局的，为什么可以用来清除浮动。
위 내용은 CSS의 float에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!