同时给一个div设置float与clear怎么解读效果呢
来源:5-1 清除浮动
能掐会算
2020-08-30 02:16:07
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div{ background-color:red; } #div1{ width:200px; height:200px; background-color:blue; float:left; } #div2{ width:220px; height:220px; background-color:yellow; float:left; } #div3{ width:240px; height:240px; background-color:green; float:left; clear:both; } #div4{ width:260px; height:260px; background-color:black; float:left; } </style> </head> <body> <div id="div"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </div> </body> </html>
在参考网站上查询到clear是使元素左右不允许出现浮动元素,这个怎么理解呢
1回答
同学你好,1. 同学只设置了左浮动,所以清除浮动只是清除了左浮动。
2. 清除浮动,并不是清除浮动本身,而是对上一个元素的影响。所以当div3清除浮动,div3就跑到了下方,但是本身div3还是浮动的,所以div4可以跟div3在一行显示。
如果我的回答解决了你的疑惑,请采纳!祝学习愉快!
相似问题
回答 3
回答 2