网页开发中如何清除浮动

这篇文章主要介绍了web开发中如何清除浮动,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

说浮动就必须提及一下文档流,当HTML中的元素按照从左到右,从上到下的顺序进行排列称之为文档流,也就是正常排列。

而浮动是什么呢?浮动会让元素脱离文档流,假如一个元素浮动了,原本排在该元素之后的元素发现一元素不在这个文档流了,就会无视它往上接到一元素前面的元素之后(PS:但是文字并不会无视它,还会环绕一元素,也就是一元素没有脱离文字流。

而如果使用位置的绝对定位会连文字流也脱离文档流。

浮动的好处当然是布局了,例如通过浮动来形成三列布的局,文字环绕等等。但是浮动也有一个问题,那就是会导致高度的塌陷,就像上面的图片显示,父元素的高度塌陷了,并没有将浮动的子元素包裹进去,这样子就会造成布局上的错误。

什么是黄东海?均是块格式化上下文的缩写,也就是块级格式化上下文,创建均有以下情况:

浮动的值不为没有。

溢出的值不为可见。

显示的值为单元格,表标题,inline-block中的任何一个。

位置的值不为相对的和静态的。

黄东海的特性就是包裹浮动的元素。按照我的理解,当你创建黄东海之后元素就会把里面的东西视为自己的东西,包括浮动元素,然后创建一个私有领域给包裹进来。此范克廉外还有还有如下特性。

1。让原本会叠加的上下外边距叠加无效。将想要边距失效的两个盒子分别放入一个父盒子,然后为父盒子创建黄东海。

2。创建黄东海的元素将不会围绕浮动元素,图中文字用p标签包裹并创建黄东海,右上角浮动元素,可以看见文字并没有环绕浮动元素。

清除浮动方法大致有两类,一类是明确的:两个| |左右,另一类则是创建黄东海,细分又可以分为多种。

1。通过在浮动元素末尾添加一个空的标签例如并设置样式为明确:两个| |左右,其他标签br等亦可。