浮动的副作用

 浮动产生负作用    

1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景CSS背景颜色CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。

2、边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

 

转载于:https://www.cnblogs.com/zyq695670953/p/7107726.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浮动(float)是CSS中一种常用的布局技术,它允许元素在文档流中浮动到指定的位置。但浮动元素可能会带来一些副作用,包括以下几个方面: 1. 父元素高度塌陷:当父元素中的子元素都设置了浮动后,父元素的高度会塌陷为0,导致父元素的背景无法显示或者无法撑开容器。这个问题可以通过清除浮动来解决。 2. 元素重叠:浮动元素在文档流中脱离了正常的布局流,可能会导致其他元素与之重叠。这个问题可以通过使用clear属性来解决。 3. 文字环绕:当浮动元素位于文本周围时,文本会环绕在浮动元素的周围,可能会导致布局混乱。这个问题可以通过使用clear属性或者调整浮动元素的位置来解决。 为了去除浮动副作用,可以采取以下几种方法: 1. 使用clearfix:给父元素添加一个clearfix类,该类包含一个清除浮动的样式规则,例如: ``` .clearfix::after { content: ""; display: table; clear: both; } ``` 然后在包含浮动元素的父元素上添加clearfix类。 2. 使用clear属性:在浮动元素的下方添加一个空的元素,并设置其clear属性为both,例如: ``` <div style="clear: both;"></div> ``` 3. 使用overflow属性:给包含浮动元素的父元素设置overflow:hidden或overflow:auto属性,可以触发BFC(块级格式化上下文),从而清除浮动的影响。 以上是一些常用的方法,根据具体的情况选择合适的方式来解决浮动带来的副作用

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值