ホームページ > 記事 > ウェブフロントエンド > CSS Float および関連するレイアウト モード
CSS Float および関連するレイアウト モード
- 高洛峰オリジナル
- 2016-11-01 15:40:271995ブラウズ
浮動小数点値
栗を見てください
赤いワイヤーフレームは親要素を表します
実際には、完全に邪魔にならないわけではなく、ブロックされます。親要素の境界によって。
float 要素は同じドキュメント フロー内にあります
例を見てください:
赤い線のボックスは親要素を表します
3 つの子要素が「左にフロート」した後、親要素はコンテンツがないため、親要素は High になりません。
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 までご連絡ください。