CSS Float 및 관련 레이아웃 모드
- 高洛峰원래의
- 2016-11-01 15:40:271951검색
부동소수 값
밤을 보세요
빨간색 와이어프레임은 상위 요소를 나타냅니다
문서 흐름에서 분리되어 실제로는 완전히 분리되지 않고 상위 요소의 경계에 의해 차단됩니다.
float 요소는 동일한 문서 흐름에 있습니다
밤나무를 보세요:
빨간색 선 상자는 상위 요소를 나타냅니다
세 개의 하위 요소가 "왼쪽으로 부동"된 후에는 상위 요소에 콘텐츠가 없으므로 상위 요소에는 높이가 없습니다.
float 요소는 문서 흐름에서 반 분리되어 있습니다.
요소의 경우 콘텐츠의 경우 문서 흐름에서 분리됩니다. 문서 흐름에 있습니다. 요소는 겹치지만 내용은 겹치지 않습니다.
밤 하나 주세요:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float元素半脱离文档流</title>
<style type="text/css">
body{
width: 300px;padding: 5px;line-height: 1.6;
border: 1px dashed blue;
}
.sample{
height: 100px;margin-right: 5px;
padding: 0 5px; line-height: 100px;background-color: pink;
}
.sb{
outline: 1px dashed red;
}
.sample{
float: left;
}
</style>
</head>
<body>
<div class="sample">float : left </div>
<div class="sb">
A float is a box that is shifted to the left or right on the current line .
the most interesting characteristic of a float (o "floated" o "floating" box)
is that content may flow along its side (or be prohibited from doing so by the 'clear'
property).
</div>
</body>
</html>
밤 하나 더 주세요:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float abscure</title>
<style type="text/css">
body{
width: 400px;line-height: 1.6;
}
.sample{
width: 100px;line-height: 100px;
margin: 3px;text-align: center;
background-color: pink;
}
.sb{
margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;
}
.sample{
float: left;
}
</style>
</head>
<body>
<div class="sb">
<div class="sample">float: left;</div>
第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。
</div>
<div class="sb">
有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。
</div>
</body>
</html>
보통 우리는 이런 결과를 원하지 않지만, 분홍색 div는 첫 번째 텍스트 블록으로만 둘러싸여 있습니다.
clear
clear 속성을 사용해야 합니다. Clear를 이해하려면 먼저 div가 블록 수준 요소이며 점유한다는 점을 알아야 합니다. 페이지 내 자체 행, 위에서 아래 배열, 즉 전설적인 흐름
①을 후속 요소에 적용하여 후속 요소에 떠 있는 영향을 제거합니다.
②블록 수준 요소에 적용
사용법:
빈 요소 추가(덜 사용됨)
clearfix , 이는 다음과 같습니다. 일반적인 해결책. 실제로 사용할 수 없는 점이 플로트를 지우는 데 사용됩니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float abscure</title>
<style type="text/css">
body{
width: 400px;line-height: 1.6;
}
.sample{
width: 100px;line-height: 100px;
margin: 3px;text-align: center;
background-color: pink;
}
.sb{
margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;
}
.sample{
float: left;
}
.clearfix:after{
content: '.'; /* 在clearfix后面加入一个 . */
display: block; /* 设置 . 块级元素 */
clear: both; /* 清除浮动效果 */
/*隐藏那个 . */
height: 0;
overflow: hidden;
visibility: hidden;
}
/* .clearfix{
zoom: 1; 由于在IE 低版本中，不支持after属性，所以需要增加zoom属性
} */
</style>
</head>
<body>
<div class="sb clearfix">
<div class="sample">float: left;</div>
第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。
</div>
<div class="sb">
有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。
</div>
</body>
</html>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.