当前位置: 首页 > 面试题库 >

bootstrap清除浮动的方法?

何骞尧
2023-03-14
本文向大家介绍bootstrap清除浮动的方法?相关面试题,主要包含被问及bootstrap清除浮动的方法?时的应答技巧和注意事项,需要的朋友参考一下

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
*/
.clearfix {
*zoom: 1;
}

:after伪类在元素末尾插入了一个包含空格的字符,并设置display为table

display:table会创建一个匿名的table-cell,从而触发块级上下文(BFC),因为容器内float的元素也是BFC,由于BFC有不能互相重叠的特性,并且设置了clear: both,:after插入的元素会被挤到容器底部,从而将容器撑高。并且设置display:table后,content中的空格字符会被渲染为0*0的空白元素,不会占用页面空间。

content包含一个空格,是为了解决Opera浏览器的BUG。当HTML中包含contenteditable属性时,如果content没有包含空格,会造成清除浮动元素的顶部、底部有一个空白(设置font-size:0也可以解决这个问题)。

:after伪类的设置已经达到了清除浮动的目的,但还要设置:before伪类,原因如下

:before的设置也触发了一个BFC,由于BFC有内部布局不受外部影响的特性,因此:before的设置可以阻止margin-top的合并。

这样做,其一是为了和其他清除浮动的方式的效果保持一致;其二,是为了与ie6/7下设置zoom:1后的效果一致(即阻止margin-top合并的效果)。

zoom: 1用于在ie6/7下触发haslayout和contain floats

 类似资料:
  • 本文向大家介绍清除浮动的方法有哪些?相关面试题,主要包含被问及清除浮动的方法有哪些?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 方法一:使用带clear属性的空元素 在浮动元素后使用一个空元素如 ,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用 或 来进行清理。 方法二:使用CSS的overflow属性 给浮动元素的容器添加overflow:hidde

  • 本文向大家介绍CSS清除浮动方法汇总,包括了CSS清除浮动方法汇总的使用技巧和注意事项,需要的朋友参考一下 清除浮动

  • 本文向大家介绍清除浮动的方式有哪些及优缺点?相关面试题,主要包含被问及清除浮动的方式有哪些及优缺点?时的应答技巧和注意事项,需要的朋友参考一下 这个问题刚好有思考整理过,今天刚好复习一下。 原文链接:https://xiangshuo.blog.csdn.net/article/details/52749993 回答前的唠叨: 在现在的实际工作当中我已经很少用浮动来布局了,真的很少,刚开始学习的时

  • 问题内容: 我有一个清单,李的有一个。之后的内容应正确对齐。 我认为,可以通过使用:after这样的伪选择器来删除。 我是否总是需要创建一个单独的div来清除浮动元素? 问题答案: 这样写:

  • 问题内容: 当我创建我的(有史以来第一次)两列时,我的问题浮出水面。 我的左,右列都有一个包装器,但是包装器的高度没有扩大到适合左,右列的位置,每一个分别漂浮在其侧面。 我在网上找到了一个解决方案,在该解决方案中,它向包装器添加了样式“overflow:auto”(这是对吗?)。 但是,在我的研究中,没有什么能以一种我可以理解的方式解释为什么包装器的高度不能自动扩展以适应嵌套的divs和两列。 嵌

  • 本文向大家介绍清楚浮动的几种方法,各自的优缺点相关面试题,主要包含被问及清楚浮动的几种方法,各自的优缺点时的应答技巧和注意事项,需要的朋友参考一下 1.父级div定义伪类:after和zoom 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题。 优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,