css浮动的原理

2020-11-27 来源：我们爱旅游

一、浮动与绝对定位的相同之处:

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>Gxl网</span> -->
<!-- 总结:浮动使元素脱离了文档流,同时使行内元素也支持了宽高,表现出与块级元素一样的特征 -->
</body>
</html>

全部栏目

css浮动的原理