关于css中的浮动要注意几点

 

  1. CSS中的浮动元素,不会和周围的外边距合并。
  2. float中有一个属性是none,用于防止元素浮动,看上去很傻,因为要让一个元素不浮动,不设置float属性不就可以了吗?如果要得到正常的不浮动行为,一定要设置float:none,也就是说让元素不浮动,一定要设定属性,但是不设定该属性的话,可能会浮动,也可能不会浮动,考虑到严谨,还是设定好。
  3. 对于非替换元素要设定浮动,必须声明该元素的width属性,不然会得到一些意想不到的结果。
  4. 打算对相应的元素设定浮动元素,一定要有包含块的全局概念。浮动元素是在包含块中浮动,浮动元素会生成块级框,即使它是行内框。
  5. 对于浮动元素,有几个规则需要遵守如下
  •  浮动元素的左外边界不能超出其包含块的左内边界,右亦然
  • 浮动元素的左外边界必须是源文件中之前出现的左浮动元素的右外边界,除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
  • 左浮动元素的右外边界不会出现在其右边右浮动元素的左外边界的右边。
  • 一个浮动元素的顶端不能比其父元素的内顶端更高
  • 浮动元素的顶端不能比之前浮动元素顶端高
  • 左浮动元素必须向左尽可能远,右浮动元素必须向右尽可能远

额外申明一点,负外边距的设置看起来会比父元素宽或者高,但从技术上说没有违反规范。
如果一个浮动元素和正常流出现重叠?CSS2.1澄清了这个问题
行内框与一个浮动元素重叠时候,,边框,背景和内容都在浮动元素之上显示
块框与一个浮动元素重叠时候,边框和背景在浮动元素之下,内容在浮动元素之上显示

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值