ホームページ > 記事 > ウェブフロントエンド > CSSフローティングの原理
CSSフローティングの原理
- 无忌哥哥オリジナル
- 2018-06-29 09:14:022856ブラウズ
1. フローティングと絶対配置の類似点:
1. フローティング要素もドキュメント フローから分離されます
2. フローティング要素は幅と高さをサポートし、ブロック要素になります。 : 水平方向にのみ実行できます;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.浮动的原理</title>
<style>
.box1 {
width:200px;
height: 200px;
background-color: lightskyblue;
/*设置左浮动*/
/*下面绿色块看不到了,因为浮动元素脱离了文档流,绿色自动上移占据了原来蓝色块的位置*/
/*如果想看到绿色块,只要将绿色块宽高调整大一点就可以*/
/*float:left;*/
}
.box2 {
width:200px;
/*width:250px;*/
height: 200px;
/*height: 250px;*/
background-color: lightgreen;
/*
如果第二个色块也浮动的话:它会紧贴着第一个浮动的元素,这是为什么呢?
因为第二个色块也脱离了文档流,与第一个是在同一个平面中,这点对排版很重要
*/
float:left;
}
.box3 {
width:200px;
height: 200px;
background-color: lightcoral; /*珊瑚色*/
/*下面浮动第三个色块*/
/*float:left;*/
/*浮动还可以向右进行,它会一直向右侧移动,直到碰到窗口最右侧停止*/
/*float:right;*/
}
.text {
width: 100px;
height: 100px;
background-color: yellow;
/*将行内元素进行浮动后,将会脱离文档流,从而使其支持宽高设置*/
/*float:left;*/
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<!-- <span>是行内元素,它的宽高由内部文本决定,不支持用户自定义宽高设置的-->
<!-- <span>php中文网</span> -->
<!-- 总结:浮动使元素脱离了文档流,同时使行内元素也支持了宽高,表现出与块级元素一样的特征 -->
</body>
</html>以上がCSSフローティングの原理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。