zoukankan      html  css  js  c++  java
  • 清除浮动(闭合浮动)的方法

                               

    一、在元素后面添加元素清除浮动

    • 添加空的标签来清除浮动:<div style="clear:both | left | right | none“></div>.出现位置要紧挨着浮动元素。缺点 带来多于标签
    • 添加br标签来清除浮动:<br style="clear:left | right | all"> 出现位置要紧挨着浮动元素,缺点:带来多于的标签
    • 使用伪类元素:after为在其元素后面,.clearfix:after{content:".",height:0;visibility:hidden;clear:both}  .clearfix{zoom:1/*for <ie8*/},可能会有空隙
    • 父元素使用overflow:hidden |auto;firefox 出现兼容问题,不建议使用
    • 父元素使用display:table,
    • 父元素一起浮动。

    二、分析能解决的根本原因

       BFC,它能包含其中的浮动元素,通过overflow,display触发了BFC。关于BFC 我做了篇笔记http://www.cnblogs.com/AliceX-J/p/5221951.html;display:table 没有直接触发BFC ,因为它创建的匿名框表,在这个框中又创建了table-cell这种BFC,间接触发了BFC.

       clear的原理:在元素内部有浮动元素,清除浮动后,父元素的高度能能撑开。

    在程序媛的路上,越走越用劲儿:)
  • 相关阅读:
    VS中的DataPager分页
    获取select标签选中的值
    JS判断包括IE11在内的IE浏览器
    几款jQuery右键菜单插件
    java day2
    java day1
    转换成(大)小写字母
    模态框扩展
    自定义动画,点赞
    反选
  • 原文地址:https://www.cnblogs.com/AliceX-J/p/5222951.html
Copyright © 2011-2022 走看看