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

In this article Xiaobian for you to introduce in detail "float div closure, clear floating, adaptive height method", the content is detailed, the steps are clear, the details are handled properly, I hope this "float div closure, clear floating, adaptive height method" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

① for example: < # div id= "floatA" > < # div id= "floatB" > < # div id= "NOTfloatC" > the NOTfloatC here does not want to continue to pan, but wants to move down. (the properties of floatA and floatB have been set to float:left;)

There is no problem with this code in IE, the problem lies in FF. The reason is that NOTfloatC is not a float tag and the float tag must be closed. Add < # div class= "clear" > this div between < # div class= "floatB" > < # div class= "NOTfloatC" > must pay attention to the position, and must be at the same level with two div with float attribute, there must be no nesting relationship, otherwise an exception will be generated. And define the style of clear as follows: .clear {clear:both;}

② as the div of the external wrapper, do not fix the height. In order to allow the height to adapt automatically, add overflow:hidden; to the wrapper. When the box of float is included, the highly automatic adaptation is invalid under IE. At this time, the layout private attribute of IE should be triggered (evil IE!) This can be done with zoom:1;, and this is compatible.

For example, a wrapper is defined as follows:

.colwrapper {overflow:hidden; zoom:1; margin:5px auto;}

Read this, the "float div closure, clear floating, adaptive height method" article has been introduced, want to master the knowledge of this article still need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

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.