float闭合问题

首先,必须知道两件事:
  1. 浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的.
  2. HTML中的所有对象几乎都默认分为两种: block对象和in-line对象. 其中, block默认的显示状态是占据整行; in-line对象则相反,允许其他对象与它在一行中显示.
  现在来看float属性, 它的作用就是改变block对象的默认显示方式. block对象设置了float属性之后,它将不再独自占据一行.
  如果有一个div 的属性是float:left,它后面又跟着一个div,这个div就会自动跟在前一个div的后面,跟着浮动,你如果不希望后面的div跟着浮动,你就需要将前一个div闭合,用clear:both。这样不会干扰后面的div。
  进行网站开发过程中处理页面布局问题的时候总会遇到因为设置float属性的标签而导致的布局错乱的问题。
  比如说,在一个父级块元素下定义了三个块级子元素,而每个子元素都设置float:left,这时候如果没有对float闭合,就会出现不可预计的后果导致后面的页面布局错乱。

   所以对设置了float属性的标签进行闭合十分重要。这里用一种万能闭合方法:
  在父元素中加入class = “clearfix”,注意是父元素。
  在css文件中加入以下代码:

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值