要素の <a href="http://www.php.cn/wiki/919.html" target="_blank">float<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>
属性不为 none
时就产生了浮动。
<p class="float">float</p>
.float { float: left; width: 100px; height: 100px; background-color: #ddd; }
浮动会使元素脱离文档流,具体表现为:
父元素高度塌陷,即不会包含浮动元素。
比如上面的代码就会表现为
文本环绕。
可以注意到这里.normal
元素的宽度覆盖了.float
元素,但是.float
元素下是没有文本的,也就是说文本被“挤”出来了,这是因为它虽然会脱离文档流,但是不会脱离文本流。这个效果也是float
属性的本意。其代码如下:
<p class="float">float</p>正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素
body { background-color: #ccc; } .float { float: left; width: 100px; height: 100px; background-color: #ddd; } .normal { background-color: #fff; }
浮动元素的外边距不会合并。
关于外边距合并的相关内容可以戳这里。
元素一旦浮动便会变成行内块元素,即 <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: inline-block
。
上面提到的文本环绕。
写一个三列布局,左右固定宽度,中间自适应。
<body> <p class="left float">left</p> <p class="right float">right</p> <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p> </body>
body { background-color: #ccc; } .float { float: left; width: 100px; height: 100px; background-color: #ddd; } .left { float: left; } .right { float: right; } .mid { height: 100px; background-color: #fff; margin: 200px; /*故意加上了上下 margin 值*/ }
这里我故意加上了上了 margin
值,可以看到效果:
body
也随 .mid
的 margin
往下掉了,这点可以用前面介绍的外边距合并来解释。
ps:我第一次自己写这个三列布局的时候,html 是这样写的
<body> <p class="left float">left</p> <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p> <p class="right float">right</p> </body>
如上把中间自适应的元素写在中间,其实这样比较符合逻辑,但是如果这样写是行不通的,右边的元素会掉下来,因为 .mid
元素是块级元素,会占满整行,.left
不会掉下来是因为它本来就是脱离文文档流的浮动元素。
这里我只写不会产生无意义标签的方法。
浮动元素后面若有兄弟元素,则可以在给它的兄弟元素加上<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>
属性。
如文本环绕那一部分代码,给 .normal
加上 clear<a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a>
或者 clear:both
。clear
的具体用法这里不做过多赘述。
给要清除浮动的元素加上伪类或者伪元素。
.float::after { content: ''; display: block; visiability: hidden; height: 0; clear: both; }
关于 ::after 的使用可以看 MDN 的文档。
BFC(Block Formatting Context),即块级格式上下文,它的官方解释是:
浮动、绝对定位元素(
<a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>
为absolute
或fixed
)、行内块元素display:inline-block
、表格单元格display:table-cell
、表格标题display:table-caption
以及<a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>
属性值不为visible
的元素(除了该值被传播到视点<a href="http://www.php.cn/css/css-rwd-viewport.html" target="_blank">viewport</a>
的情况)将创建一个新的块级格式化上下文。
总结来说它要满足下列条件之一:
float
不为 none
position
不为 <a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>
或 relative
code> 属性
none
でない場合、フローティングが発生します。 🎜rrreeerrreee🎜2. フローティングの影響🎜
🎜
🎜
<a href="http://www.php.cn/wiki/927.html" target="_blank">表示🎜: インラインブロック</a>
。 🎜margin
値を追加しました。その効果がわかります: 🎜
🎜
<a href="http://www.php%20%E3%82%92%E3%81%9D%E3%81%AE%E5%85%84%E5%BC%9F%E8%A6%81%E7%B4%A0%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82%20cn/wiki/917.html" target="_blank">clear🎜</a>
属性。 clear<a href="http://www.php.cn/wiki/974.html" target="を">.normal に追加します。 code> "_blank">:left🎜</a>
または clear:both
。 clear
の具体的な使用法については、ここでは詳しく説明しません。 🎜🎜Floating, 絶対位置の 🎜 要素 (🎜要約すると、次の条件のいずれかを満たしている必要があります: 🎜<a href="http://www.php.cn/wiki/902.html" target="_blank">position🎜</a>
はabsolute) code> または <code>fixed
)、インライン ブロック要素display:inline-block
、表 🎜 セルdisplay:table-cell
、表タイトルdisplay:table-caption
および<a href="http:/%20/%20www.php.cn/wiki/923.html" target="_blank">overflow🎜</a>
属性値がvisible
ではない要素 (値がビューポートに伝播される場合を除く ビューポート🎜) は、新しいブロックレベルの書式設定コンテキストを作成します。 🎜
float
が none🎜
position
は <a href="http://www.php.cn/wiki/188.html" target="_blank ">静的🎜</a>
または 相対
🎜display
は table-cell
、table-caption
、inline-block
、flex、<code>inline-flex
display
为 table-cell
、table-caption
、inline-block
、flex
、inline-flex
overflow
不为 visible
overflow
は visible
ではありません🎜🎜上記の属性のいずれかを親に追加するだけですelement 条件が満たされる場合、つまり親要素に BFC を追加すると、子要素の float をクリアできます。 🎜以上がCSS Float および Float Clear (BFC) の簡単なチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。