Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how CSS clears floating". The content is simple and easy to understand and clearly organized. I hope it can help you solve your doubts. Let Xiaobian lead you to study and learn this article "how CSS clears floating".

CSS Clear Floating Method Collection

I. Causes of floating- TOP

What is the general floating situation? CSS float is usually used in a box, resulting in the parent object box can not be opened, so CSS float is generated.

Floating produces style effect screenshots

Originally, the two black object boxes were inside the red box. Because float was used on the two black boxes, the two black boxes floated, causing the red box not to open, so float occurred.

Simply put, float is a float that results from using float:left or float:right, or both.

II. Negative effect of floating- TOP

1. Background cannot be displayed

Due to float generation, CSS background cannot be displayed if CSS background color or CSS background image is set for parent and parent cannot be opened.

2. The frame cannot be opened

As shown in the above figure, if the CSS border property (css border) is set at the parent level, the float property is used in the child level, resulting in floating. The parent level cannot be opened, resulting in the border not being opened with the content.

The margin padding settings are not displayed correctly.

Due to floating, the values of css padding and css margin attributes set between parents and children cannot be expressed correctly. In particular, the padding and margin on the upper and lower sides are not displayed correctly.

Third, css solve floating, clear floating method-TOP

Here DIVCSS5 to explain the floating solution uniformly, assume that there are three box objects, a parent contains two children, one child uses the float:left attribute, and the other child uses the float:right attribute. At the same time, set div CSS border, parent CSS border color is red, two child border color is blue; parent CSS background style is yellow, two child background is white; parent CSS width is 400px, two child CSS width is 180px, two children set the same height 100px, parent CSS height temporarily not set (usually for the actual CSS layout, such parents do not set height, and height is increased with the content adaptive height).

Parent CSS named ". "Use""for html tags

The two child CSS are named ".- left"".- right"

According to the above description, DIVCSS5 gives corresponding CSS code and HTML code fragments

CSS code:

. { width:400px; border:1px solid #F00; background:#FF0} .- left,.- right{ width:180px; height:100px; border:1px solid #00F; background:#FFF} .- left{ float:left} .- right{ float:right}

Corresponding html source code fragment:

left float right float

清除浮动前案例截图父级需要清除浮动

以下DIVCSS5总结了几点用于清除浮动的经验教程

1、对父级设置适合CSS高度

对父级设置适合高度样式清除浮动，这里对"."设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px，这样具体父级高度为102px

CSS代码：

.{ width:400px;border:1px solid #F00;background:#FF0; height:102px} .-left,.-right{width:180px;height:100px; border:1px solid #00F;background:#FFF} .-left{ float:left} .-right{ float:right}

Html代码不变。得到截图

使用height高度清除浮动

小结，使用设置高度样式，清除浮动产生，前提是对象内容高度要能确定并能计算好。

2、clear:both清除浮动

为了统一样式，我们新建一个样式选择器CSS命名为".clear"，并且对应选择器样式为"clear:both"，然后我们在父级""结束前加此div引入"class="clear""样式。这样即可清除浮动。

具体CSS代码：

.{ width:400px;border:1px solid #F00;background:#FF0} .-left,.-right{width:180px;height:100px; border:1px solid #00F;background:#FFF} .-left{ float:left} .-right{ float:right} .clear{ clear:both}

Html代码：

left浮动 right浮动

clear清除浮动截图

clear清除浮动截图 使用CSS clear清除浮动

这个css clear清除float产生浮动，可以不用对父级设置高度 也无需技术父级高度，方便适用，但会多加CSS和HTML标签。

3、父级div定义 overflow:hidden

对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

overflow:hidden解决CSS代码：

.{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden}

.-left,.-right{width:180px;height:100px;

border:1px solid #00F;background:#FFF}

.-left{ float:left}

.-right{ float:right}

HTML代码不变。

解决清除浮动后截图

overflow清除float产生浮动截图 overflow:hidden清除浮动截图

为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。Css overflow:hidden清除浮动方法DIVCSS5推荐使用。

以上是"CSS如何清除浮动"这篇文章的所有内容，感谢各位的阅读!相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.