当前位置： 移动技术网 > IT编程>网页制作>CSS > css 盒模型 文档流 几种清除浮动的方法

css 盒模型 文档流 几种清除浮动的方法

2018年09月10日  | 移动技术网IT编程  | 我要评论

盒模型

1、box-sizing: content-box 是普通的默认的一种盒子表现模式  
    盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持w3c的标准box mode
2、box-sizing:border-box 以盒子边框为界 自己管理里面的元素
    border-box  盒子大小为 width    就是说  padding 和 border 是包含到width里面的

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内(inset)/外阴影；

文档流

普通流（标准流）
浮动
定位

浮动

浮动出现:解决文字环绕的效果
后来发现浮动可以做很多事
浮动会脱离标准流 不会占有原来的位置
浮动 是找的离他最近的父元素
浮动的对齐方式是顶部对齐
 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
浮：    加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏：    加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
特：    特别注意，这是特殊的使用，有很多的不好处，使用要谨慎。
 

 清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
我们有时候不方便给父盒子高度 或者不知道父盒子的高度 这个时候就需要清除浮动
 
 
怎么去清除浮动?
    clear:both 同时清除左右两侧浮动的影响
1.给父盒子设置高度
*2.额外标签法 : 添加一个额外的标签  clear:both   起到分离上部分和下部分的作用  
        影响了本身html结构
3.给父盒子一个display:table  但是有缺陷  建议 不要使用
*4.overflower:hidden  溢出隐藏
*5. 
​
  .father:after {
        content: ".";/* 这里不建议大家使用"" */
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
      }

 

6. *zoom:1;处理ie6以下的版本兼容问题
​
*7.双伪元素清除浮动
  .clearfix:before,.clearfix:after { 
          content:".";
          display:table;
        }
        .clearfix:after {
         clear:both;
        }
        .clearfix {
          *zoom:1;
        }

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网