腾讯云·社区
前端基础-CSS浮动
浮动（重点）
浮动最早期做的是图文绕排
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.news{width:500px;border:1px solid #000;overflow:hidden;}
img{float:left;} /* 浮动，还可以是right */
</style>
</head>
<body>
<div class="news">
环球网综合报道】据日本NHK电视台8月29日报道，117岁的玻利维亚女性朱丽叶•弗洛雷斯•科尔克(Julia Flores Colque)被认为是目前世界上最长寿的老人。这位老人近日边弹奏弦乐边唱歌的视频画面引起热议。
<img src="myweb/1.png" alt="" />
科尔克居住在玻利维亚中部的高地上。玻利维亚政府颁发的出生证明显示，老人生于1900年10月26日，今年10月她将迎来118岁的生日。除了有些耳背外科尔克身体健康，经常弹奏一种叫恰兰戈的小吉他，用安第斯山特有的奇楚亚语演唱民歌，她终身未婚未育。
</div>
</body>浮动的语法：
float:left/right /none
取值：left向左浮动，right向右浮动，none取消浮动
现在的浮动，用的最多是让块元素在同一行显示：就是给一行的所有块元素都加上浮动
浮动的最大价值：让元素排列成一行，或者一左一右
浮动的使用口诀：
1.要浮动，兄弟元素也一起浮动
2.浮动方向保持一致（尽量都是用左浮动）
总结：
1.可以做图文绕排
2.主要让块元素排一行，多个元素一起浮动
3.注意加了浮动以后元素的顺序，标签顺序，浮动方向
4.浮动的元素脱离标准流
1.行元素浮动
行元素浮动，会优先于普通元素占据设置方向的位置，不会重叠
2.块元素浮动
块元素浮动，会脱离页面原本的文本流（不占据原本的空间），会覆盖其他元素
多学一招：
1.脱离文本流的元素具有行内的块元素的特性（不换行，能设置宽高），无论原来是行元素还是块元素–例：图文绕排。
2.设置了浮动的元素，居中对元素不起作用
3.浮动元素不会覆盖文字
4.大盒子放不下了，浮动元素会掉下去，掉下去的元素位置根据上一个元素的高度：（1）上一个元素高度比较小，在上一个元素的正下方（2）上一个元素高度比较大，高度的起始位置，在上一个元素的下方
总结：
1.所有元素浮动后都变成了行内块
2.浮动元素不能覆盖文字
浮动引起的问题：
<style>
/* 浮动的盒子撑不开父容器
解决办法：强制追加一个高度（不推荐，因为很多时候盒子的高度是会变化的）
*/
.box {
width: 500px;
border: 1px solid #000;
}
.info {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.gebilaowang {
width: 500px;
height: 300px;
background-color: lime;
}
</style>
</head>
<body>
<div class="box">
<div class="info">1</div>
<div class="info">2</div>
<div class="info">3</div>
<div class="info">4</div>
</div>
<div class="gebilaowang"></div>3.清除浮动
就是清除浮动带来的影响，普通元素不受浮动元素影响
a) 给父元素设置高度（不推荐，因为在项目中很多盒子是不固定高度的）
b 在父元素后设定空标签进行清除浮动
语法：clear:both
c) 设定父元素的overflow
overflow的原理：overflow可以创建一个BFC（块级格式化上下文 (Block Fromatting Context)），按照块元素布局，BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。说白了就是将盒子内部的元素和外部的元素进行隔离，互不影响。
d) 使用伪对象代替空标签
本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句