欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

【HTML/CSS】浮动模型和清除浮动的方法

发布时间:2024/7/5 HTML 47 豆豆
生活随笔 收集整理的这篇文章主要介绍了 【HTML/CSS】浮动模型和清除浮动的方法 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1 浮动

  • 浮动是让元素脱离文档流,浮动前后的非定位元素会无视浮动元素,可能沿着元素另一侧垂直流动。
  • 浮动元素会生成一个块级框,具有块级元素的特性,但是不占整行。
  • 浮动元素脱离了文档流,无法为文档流中的父元素撑起高度,造成父盒子塌陷的问题
  • 2 清除浮动

  • clear:left左侧不允许浮动元素
  • clear:right右侧不允许浮动元素
  • clear:both两侧不允许浮动元素
  • 3 清除浮动的技巧

  • 添加一个空的div + clear:both清除浮动,添加了无意义的html代码
  • 给父元素添加overflow:hidden,父元素本身形成一个BFC,BFC可以包裹浮动流,BFC中浮动元素的高度也被计算在内,可以实现清除浮动,但是无法显示溢出的元素。
  • 给父元素设置伪元素清除.clearfix::after {content: '';display: block;clear: both;height: 0;visibility: hidden; } .clearfix{*zoom: 1 /*兼容IE 会触发haslayout*/ /*haslayout是IE浏览器引擎的一个组成部分,在IE中,一个元素要么根据自身内容进行布局,要么根据父元素进行布局。haslayout=“true”,元素会根据自身的内容去调整大小,而非依赖父元素去渲染自己。haslayout = “false”,该元素会依赖于父元素渲染自己。*/ }
  • 总结

    以上是生活随笔为你收集整理的【HTML/CSS】浮动模型和清除浮动的方法的全部内容,希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。