本文主要是介绍【HTML】解决DIV消除浮动问题(clear),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
知识点:
清除(clear)的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开,相当于这个元素独立成一行,其它元素不管宽度大小,都不能和这个元素并排显示。如果是clear:right;就相当于这个元素右边的内容会被排除开,但是左边的不会,仍然可以在同一行显示。
1.在一个大盒子里面放两个浮动的小盒子,这种情况大盒子会认为自己里面没内容,而恰恰我们不会给大盒子加宽度的。遇到这种问题我们经常用clear来实现!
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#div_box{width: 500px;background-color: red;}#div_left{width: 100px;height: 100px;background-color:#0f0;margin-left:10px;float:left;}#div_right{width: 100px;height: 100px;background-color:#00f;margin-left:10px;float:left;}.clear{clear:both;}</style>
</head>
<body>
<div id="div_box"><div id="div_left"></div><div id="div_right"></div><div class="clear"></div>
</div>
</body>
</html>
大家可以访问我的个人网站:https://www.yykjc.cn 方便大家一起讨论
这篇关于【HTML】解决DIV消除浮动问题(clear)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!