html浮点消除,CSS清除浮动float的三种方法小结

一、浮动的定义

使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

ps:文档流:文档流是文档中可显示对象在排列时所占用的位置 。

语法

float常跟属性值left、right、none

float:none 不使用浮动

float:left 靠左浮动

float:right 靠右浮动

二、浮动的用途

可设置文字环绕或使元素宽度由内容填充(类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高,那么需要设置父级容器的overflow属性为auto,使其自动撑满。

三、浮动用法

分析HTML结构:

1
2
3

分析CSS代码样式:

.box {

border: 1px solid #ccc;

background: #fc9;

color: #fff;

margin: 50px auto;

padding: 50px;

}

.div1 {

width: 100px;

height: 100px;

background: darkblue;

float: left;

}

.div2 {

width: 100px;

height: 100px;

background: darkgoldenrod;

float: left;

}

.div3 {

width: 100px;

height: 100px;

background: darkgreen;

float: left;

}

1250453852a04624cac5619ced2eb63f.png

清除浮动

方法一:添加新元素,应用clear:both;

HTML:

1
2
3

CSS:

.clear {

clear: both;

height: 0;

line-height: 0;

font-size: 0

}

0952e19a0fc1612be5bb1df0f41a1af9.png

一切恢复作用啦。

方法二:父级div定义overflow:auto;

HTML:

1
2
3

CSS:

.box {

border: 1px solid #ccc;

background: #fc9;

color: #fff;

margin: 50px auto;

padding: 50px;

overflow: auto;

zoom: 1; /*zoom: 1; 是在处理兼容性问题 */

}

结果:也是实现了。

方法三:在父级样式添加伪元素:after或者:before(推荐)

HTML:

1
2
3

CSS:

.box {

border: 1px solid #ccc;

background: #fc9;

color: #fff;

margin: 50px auto;

padding: 50px;

}

.box:after{

content: '';

display: block;

clear: both;

}

结果:当然不用说啦

38b1d65bd64554871de244718dbbf53a.png

总结

以上所述是小编给大家介绍的CSS清除浮动float的三种方法小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值