Example Analysis of clearing floating method in css
In this article, the editor introduces in detail the "case analysis of floating method removal in css", with detailed content, clear steps and proper handling of details. I hope that this article "case analysis of floating method removal in css" can help you solve your doubts.
1. [.clr {clear:both;}], the upper border of an element with the clear attribute set will render close to the margin-bottom boundary of the floating element, ignoring its margin-top setting.
The code is as follows:
.divcss5 {width:400px;border:1px solid # F00 BackgroundF0}
. divcss5-left,.divcss5-right {width:180px;height:100px
Border:1px solid # 00FitterBackgroundFF}
. divcss5-left {float:left}
. divcss5-right {float:right}
.clear {clear:both}
2. Empty tag floats: [.clr {clear:both;height:0;overflow:hidden;}], which is not recommended.
3. Pseudo-class after floats: [.clr: after {content: "; clear:both;display:block;height:0;visibility:hidden;line-height:0;} .clr {zoom:1}].
4. Use [display:table].
5. Use overflow to divide visible, which is similar to activating haslayout.
6. Use the floating parent element to clear the float.
The code is as follows:
.divcss5 {width:400px;border:1px solid # F00 BackgroundFF0; overflow:hidden}
. divcss5-left,.divcss5-right {width:180px;height:100px
Border:1px solid # 00FitterBackgroundFF}
. divcss5-left {float:left}
. divcss5-right {float:right}
After reading this, the article "case Analysis of removing floating methods in css" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.
