zoukankan      html  css  js  c++  java
  • 清除浮动

    参考学习:https://www.cnblogs.com/nxl0908/p/7245460.html

    1.父级div定义伪类:after和zoom
    2.在结尾处添加空div标签clear:both /(结尾处加br标签clear:both)
    3.父级div定义display:table
    4.父级div定义height
    5.父级div定义overflow:hidden
    6.父级div定义overflow:auto
    7.父级div也一起浮动

    1.父级div定义伪类:after和zoom

    	<style>
    		.box1{
    			 100px;
    			height: 100px;
    			background-color: red;
    			float: left;
    		}
    		.box2{
    			 100px;
    			height: 100px;
    			background-color: blue;
    			float: left;
    		}
    		.container{
    			border:1px solid black;
    		}
    		.box3{
    			height: 200px;
    			background-color: green;
    		}
    		
    		 **.clearfloat:after{
    		 	display:block;
    		 	clear:both;
    		 	content:"";
    		 	visibility:hidden;
    		 	height:0}
            .clearfloat{zoom:1}**
    	</style>
    
    <body>
    	<div class="container clearfloat" >
    		<div class="box1"></div>
    		<div class="box2"></div>
    	</div>
    	<div class="box3">	
    	</div>
    </body>
    

    2.在结尾处添加空div标签clear:both

    	<style>
    		.box1{
    			 100px;
    			height: 100px;
    			background-color: red;
    			float: left;
    		}
    		.box2{
    			 100px;
    			height: 100px;
    			background-color: blue;
    			float: left;
    		}
    		.container{
    			border:1px solid black;
    		}
    		.box3{
    			height: 200px;
    			background-color: green;
    		}
    		**.clearboth{
    			clear:both;
    		}**
    	</style>
    
    <body>
    	<div class="container">
    		<div class="box1"></div>
    		<div class="box2"></div>
    		**<div class="clearboth"></div>**
    	</div>
    	<div class="box3">
    	</div>
    </body>
    

    3.父级div定义height

    	<style>
    		.box1{
    			 100px;
    			height: 100px;
    			background-color: red;
    			float: left;
    		}
    		.box2{
    			 100px;
    			height: 100px;
    			background-color: blue;
    			float: left;
    		}
    		.container{
    			border:1px solid black;
    			**height: 100px;**
    		}
    		.box3{
    			height: 200px;
    			background-color: green;
    		}
    	</style>
    
    <body>
    	<div class="container" >
    		<div class="box1"></div>
    		<div class="box2"></div>
    	</div>
    	<div class="box3">
    	</div>
    </body>
    

    4.父级div定义overflow:hidden

    	<style>
    		.box1{
    			 100px;
    			height: 100px;
    			background-color: red;
    			float: left;
    		}
    		.box2{
    			 100px;
    			height: 100px;
    			background-color: blue;
    			float: left;
    		}
    		.container{
    			border:1px solid black;
    			**overflow: hidden;**
    		}
    		.box3{
    			height: 200px;
    			background-color: green;
    		}
    	</style>
    
    <body>
    	<div class="container" >
    		<div class="box1"></div>
    		<div class="box2"></div>
    	</div>
    	<div class="box3">	
    	</div>
    </body>
    

    5.父级div定义overflow:auto

    	<style>
    		.box1{
    			 100px;
    			height: 100px;
    			background-color: red;
    			float: left;
    		}
    		.box2{
    			 100px;
    			height: 100px;
    			background-color: blue;
    			float: left;
    		}
    		.container{
    			border:1px solid black;
    			overflow: auto;
    		}
    		.box3{
    			height: 200px;
    			background-color: green;
    		}
    	</style>
    
    <body>
    	<div class="container" >
    		<div class="box1"></div>
    		<div class="box2"></div>
    	</div>
    	<div class="box3">
    	</div>
    </body>
    

    6.父级div也一起浮动

    	<style>
    		.box1{
    			 100px;
    			height: 100px;
    			background-color: red;
    			float: left;
    		}
    		.box2{
    			 100px;
    			height: 100px;
    			background-color: blue;
    			float: left;
    		}
    		.container{
    			border:1px solid black;
    			**float:left;**
    		}
    		.box3{
    			height: 200px;
    			background-color: green;
    			**clear:both;**
    		}
    	</style>
    
    <body>
    	<div class="container" >
    		<div class="box1"></div>
    		<div class="box2"></div>
    	</div>
    	<div class="box3">
    	</div>
    </body>
    

    7.父级div定义display:table

    	<style>
    		.box1{
    			 100px;
    			height: 100px;
    			background-color: red;
    			float: left;
    		}
    		.box2{
    			 100px;
    			height: 100px;
    			background-color: blue;
    			float: left;
    		}
    		.container{
    			border:1px solid black;
    			display:table;
    		
    		}
    		.box3{
    			height: 200px;
    			background-color: green;
    
    		}
    	</style>
    
    <body>
    	<div class="container" >
    		<div class="box1"></div>
    		<div class="box2"></div>
    	</div>
    	<div class="box3">
    	</div>
    </body>
    

    8、结尾处加br标签clear:both

  • 相关阅读:
    最短路径(Dijkstra和堆优化)
    最小生成树(prim和Kruskal)
    ac自动机(加强版)
    【敏捷】火星人敏捷开发手册- 教你怎么开会 然并卵知晓
    【敏捷】扑克牌估算
    向黄太吉学习线上营销模式
    黄太吉品牌创始人赫畅:创造下一个互联网奇迹
    吃煎饼思考人生:从黄太吉看商家的社会化营销
    月薪3000与月薪30000的文案区别
    聚美优品广告词和经典分析
  • 原文地址:https://www.cnblogs.com/princeness/p/11664958.html
Copyright © 2011-2022 走看看