刚入门,对于浮动float的作用、影响和解决方案和它们的缺点

浮动的作用
1、是为了让元素并排
2、转换行级标签成块级标签,使其可以设置宽高

使用浮动带来的影响
脱离文档流,对其后面紧随的元素产生影响,进行覆盖,优先显示

清除浮动解决方案
(1)浮上去的元素,给它设置float:left;让它也浮动起来,但是它的结构便不是自然的结构了,不推荐
(2)在用完浮动的地方的后面建立一个空标签,给空标签设置一个属性,clear:both;弊端:会造成标签冗余,不推荐
(3)在父级盒子里设置超出隐藏,overflow:hidden;弊端:可能会对文档结构产生影响,如后期的特效,不推荐

(4)通过在用完浮动的盒子处建立伪类选择器清除浮动,格式.box:after{content:"";display:block;clear:both;}推荐使用


浮动可以使行级标签像块级标签一样使用,有宽高并且并排

 


浮动能少用就尽量少用,因为用了浮动的元素已经脱离了文档流,在html里面不再占有空间并且显示。会对后面紧跟着的元素再次影响覆盖它。



什么是文档流呢?   文档流就是元素在html里面占有实实在在的空间,对后面的元素不会产生影响







奋斗

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值