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

小诸哥 2022-06-23 21:59:42 0

盒模型

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;
         }