无论您是
网站建设初学者还是有经验的网站开发人员,您都有必要学会处理CSS浮动问题的有价值的见解和实用的解决方案,文涵盖了使用CSS浮动的常见问题,以及如何使用块格式化上下文(BFC)解决这些问题,通过了解使用bfc的缺点以及如何最小化它们。
媒体对象是迷你布局。目前最流行、最容易实现的布局方法包括CSS Flexbox和网格。很久以前一些开发人员可能会选择表格显示方法相反,虽然它是为了在网站上实现报纸或杂志媒体显示而创建的,但在Flexbox和Grid引入之前,浮动是创建布局的黄金标准,即使它不是专门为此用途设计的。这不是最简单或者最好的布局方式,即使对于像媒体对象这样小的东西也是如此。
Flexbox和Grid非常适合媒体对象的任务。这实际上是一个偏好问题,但是在媒体对象中使用浮动的一个原因是它们可以更轻量级,需要更少的标记与其他布局方法相比。这里的目标不是让你相信浮动是布局媒体对象的最佳方法,而是帮助你解决在这种情况下使用浮动的挑战。当图像或视频等媒体元素与文本交互时,浮动是一种有效的选择。
通常开发人员会遇到内容包装问题当使用浮动时,对于媒体对象尤其如此,其中一个元素在一边,而文本应该在另一边。比如右边的文字超长怎么办?如果它超出了左边元素的高度,它会自动换行。或者它会溢出包含它的容器。虽然一些开发人员可能会将这种行为视为一个错误,但事实并非如此。这只是浮动应该做的。