float浮动的详解

首先我们来了解一下文档流:
文档流是文档中可显示对象在排列时所占的位置.
(元素在页面中所占的位置)
这个了解了以后接下来我们就谈谈浮动:float
float:指定元素设置元素的浮动
值: left – 左浮动
right – 右浮动
float特点:
1 脱离文档流
2 浮动后不占位置.
3 后面的普通元素会战绩浮动元素的位置.
4 造成父级高度塌陷.
5 没有完全脱离文档流,会把文字挤出来,达到文本环绕浮动元素的效果.(行内元素与行内块都是被当作文字来解析的)
6 给了浮动的元素,会影响后面的元素
7 让块级元素宽度为内容的宽度或者width的值的宽度
8 如果父级宽度太窄,无法容纳所有的浮动元素,无法容纳的浮动元素会往下掉;
9 如果浮动的元素高度不相同,后面要掉下的浮动元素,会被前面的个子高的浮动元素卡住.(以个子高的为主)

注意 : 1 写了浮动,一定要记住清楚
2 不要直接在加了浮动的元素上写clear

解决浮动带累的父元素高度塌陷和一些影响
clear: left | right | both ;

解决浮动:哪里浮动哪里清楚
1 都给浮动 — 会影响后面,挡住后面的元素
2 给浮动元素的父级加高度 — 可以解决父元素高度塌陷问题 (扩展性不好)
3 给浮动元素后面加一个空的块级元素,给空元素设置
clear:both;清除两侧的浮动
4 after:清楚浮动 — 最适合的清楚方法
.box:after{
content:’ ‘;
display:block;
clear:both;
}
注意 : 设置清除浮动的元素必须是块级元素
行内元素加浮动:
会让行内元素变成块级元素( 但是默认由内容撑开高度或者固定值)
margin:auto;失效

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值