css 盒模型 文档流 几种清除浮动的方法实例详解
我要评论盒模型
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;
}
总结
以上所述是小编给大家介绍的css 盒模型 文档流 几种清除浮动的方法实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
- 本文讲讲述伪元素以及功能强大的Contet属性，文章通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-09-18
本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景，如填充文本、作为iconfont、进度线、时间线以及几何图形，感兴趣的朋友一起看看吧2018-02-07- 这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来2017-05-07
- 这篇文章主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料，文中先进行了详细的介绍，方便大家理解，而后给出了完整的实例代码让大家可以参考学习2017-04-25
CSS使用placeholder-shown伪类实现输入框浮动文字效果
这篇文章主要介绍了CSS使用placeholder-shown伪类实现输入框浮动文字效果,需要的朋友可以参考下2019-06-12
本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮动的实例代码，非常不错，具有一定的参考借鉴价值，,需要的朋友可以参考下2019-04-29
这篇文章主要介绍了css 如何清除浮动的示例代码，详细的介绍了浮动到底是什么和清理浮动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看2018-11-12
这篇文章主要介绍了css布局之定位与浮动的相关资料,需要的朋友可以参考下2018-05-21
使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。本文给大家带来了CSS清除浮动float的三种方法小结，感兴趣的朋友跟随脚本之家小编一起2018-03-13- 块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这篇文章给大家介绍了CSS 使用伪元素清除浮动的方2019-07-01
最新评论