第十一讲：浮动元素的特点

浮动

浮动是css里面布局用的最多的属性，它能使两个元素并排，且都能够设置宽和高。

【案例】

CSS

.box1{

float: left;

width: 100px;

height: 100px;

background-color: greenyellow;

}

.box2{

float: left;

width: 100px;

height: 100px;

background-color: skyblue;

}

HTML

box1

box2

【运行结果】

浮动元素的特点

浮动的元素脱标

box1盒子float:left;box2盒子没有float。box1盒子脱离标准文档流，box2盒子就是标准文档流中的第一个盒子，所以就渲染在了页面的左上方。如：

【案例】

CSS

.box1{

float: left;

width: 200px;

height: 200px;

background-color: pink;

}

.box2{

width: 300px;

height: 300px;

background-color: skyblue;

}

HTML

box1

box2

【运行结果】

一旦一个元素浮动，无论它原来是个div还是个span，它将能够并排并且能够设置宽高。如：

【案例】

CSS

span{

float: left;

width: 100px;

height: 100px;

background-color: pink;

}

HTML

span

span

span

span

【运行结果】

浮动的元素有“字围”效果

div盒子float:left;p没有float，此时div挡住了p，但是p中的文字不会被挡住，形成“字围”效果。如：

【案例】

CSS

div{

float: left;

width: 200px;

height: 110px;

padding:10px;

border: 1px solid #ccc;

}

HTML

123------------------------------------------------------------------------------------------------------------------------------------------------------浮动的元素有“字围”效果------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------浮动的元素有“字围”效果-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

【运行结果】

浮动的元素有“收缩“效果

一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度，这点非常像行内元素。

【案例】

CSS

div{

float: left;

background-color: pink;

}

HTML

div

【运行结果】

div

打赏规则

为了避免对于打赏模式产生误解，说明一下几点内容：

1.打赏纯粹自愿，金额不限；

2.打赏不能作为解答前端技术疑问的理由；

3.打赏不能作为催促更新文章的理由；

4.打赏不能帮你做毕业设计或论文；

5.打赏不能帮你做工作中的项目；

6.总之：打赏就是这不能那不能，只是单纯打赏而已。

声明

* 公众号（QD前端基地）内转载文章全部用于学习交流，如有涉及版权问题请与我联系，我会删除相关文章。给您带来不便敬请谅解，谢谢！

* 公众号（QD前端基地）内原创文章如内容不符合事实或涉及其他方面的问题，请及时通知本人进行修改或删除。版权作品未经授权严禁盗图转载，如有雷同纯属巧合。

* 转载公众号（QD前端基地）内的文章，请先与本文作者联系经过同意后方可转载，并注明相关出处和作者信息且留下原文链接地址，这是对文章作者的尊重，也是对知识的尊重。欢迎同行网站转载本站文章。

【投诉请联系微信】：xinxiha888

前端基地

「前端基地」最专业的Web前端开发在线学习公众号，提供Web前端开发教程，是分享Web前端开发技术和前端资源的在线学习交流公众号。

关注一下，也许你就成为牛逼的前端高手呢～

微信公众号：qdbase