A method to add an empty div tag at the end of clear: both
And put a label under the floating box, use clear in this tab: both, to clear floating impact on the page.
NOTE: Do not use this kind of way under normal circumstances to clear the float. Because of this clear float way to increase your tags, confusing structure.
<div class="box">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
<div class="clear"></div>
</div>
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
The second method defined in the parent div overflow: auto
Principle: Using overflow property to remove floating thing to note, overflow attribute a total of three properties: hidden, auto, visible. We can use hiddent and auto value to clear the float, but remember not to use visible value
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
Three methods to remove pseudo-floating elements (: After, Note: The role of the father to the floating element)
(Note: This method is mainly recommended)
.clearfix:after{
content:"";/*设置内容为空*/
clear:both;/*清除浮动*/
display:block;/*将文本转为块级元素*/
height:0;/*高度为0*/
visibility:hidden;/*将元素隐藏*/
}
.clearfix{
zoom:1;/*为了兼容IE*/
}
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
end~~~