css clear:both 的作用

最新推荐文章于 2021-11-17 14:58:31 发布

sliverhumor

最新推荐文章于 2021-11-17 14:58:31 发布

阅读量193

点赞数 1

文章标签： clear 浮动

本文链接：https://blog.csdn.net/qq_18887855/article/details/82562620

版权

f2为浮动元素,此时f3元素的背景和边框被挤在其下面,但是其内容没有影响

<style type="text/css">
       	    #f1{
       	    	width: 100px;
       	    	height: 100px;
       	    	background-color: red;

       	    }
       	     #f2{
       	     	float: left;
       	    	width: 50px;
       	    	height: 50px;
       	    	background-color: blue;
       	    }
       	     #f3{
       	    	width: 100px;
       	    	height: 100px;
       	    	background-color: yellow;

       	    }
       	     #f4{
       	    	background-color: green;
       	    }
       </style>
   </head>
   <body style="height: 100%; margin: 0">
      <div  id="f1" >11111</div>
      <div id="f2">22222</div>
      <div id="f3"><div id="f4">33333</div></div>
   </body>