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

  • 相关阅读:
    js获取数组中的值显示[object HTMLInputElement]
    IntelliJ Idea 常用快捷键
    MySQL查询本周、上周、本月、上个月份数据的sql代码
    表的基本
    字符串类型
    备份数据库
    增加标 和增加其内容
    数据库的基本
    jq做的简单的变色表格
    jq做的简单的轮播
  • 原文地址:https://www.cnblogs.com/princeness/p/11664958.html
Copyright © 2011-2022 走看看