zoukankan      html  css  js  c++  java
  • 浮动定位

    浮动定位float

    float可选值:
    * none,默认值,元素默认在文档流中排列
    * left,元素会立刻脱离文档流,向页面的左侧浮动
    * right,元素会立刻脱离文档流,向页面的右侧浮动

    浮动定位是居于文档流之上的定位。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="{CHARSET}">
    		<title></title>
    		<style>
    			.box1{200px;
    			height:200px;
    			background-color: red;
    			float: left;
    			}
    			/*块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开
    			 * 如果希望块元素在页面中水平排列,可以使用块元素脱离文档流
    			 * 使用float设置元素浮动,从而脱离文档流
    			 * 可选值:
    			 * none,默认值,元素默认在文档流中排列
    			 * left,元素会立刻脱离文档流,向页面的左侧浮动
    			 * right,元素会立刻脱离文档流,向页面的右侧浮动
    			 * 
    			 * 当为一个元素设置浮动以后会立刻脱离文档流,它下面的元素会立刻顶上来,元素浮动以后会尽量往左上或者往右上漂浮
    			 * 浮动元素要比文档流更高一层
    			 * 
    			 */
    			
    			.box2{300px;
    			height:300px;
    			background-color: yellow;
    			}
    			.box3{200px;
    			height:200px;
    			background-color: blue;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box1"></div>
    		<div class="box2"></div>
    		<div class="box3"></div>
    	</body>
    </html>

     

     浮动定位不会超过上面的兄弟元素

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="{CHARSET}">
    		<title></title>
    		<style>
    			.box1{600px;
    			height:200px;
    			background-color: red;
    			float: left;
    			}
    			/*块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开
    			 * 如果希望块元素在页面中水平排列,可以使用块元素脱离文档流
    			 * 使用float设置元素浮动,从而脱离文档流
    			 * 可选值:
    			 * none,默认值,元素默认在文档流中排列
    			 * left,元素会立刻脱离文档流,向页面的左侧浮动
    			 * right,元素会立刻脱离文档流,向页面的右侧浮动
    			 * 
    			 * 当为一个元素设置浮动以后会立刻脱离文档流,它下面的元素会立刻顶上来,元素浮动以后会尽量往左上或者往右上漂浮
    			 * 浮动元素要比文档流更高一层
    			 * 
    			 * 浮动元素上面是一个没有元素,它就不会超过块元素。
    			 * 
    			 * 浮动的元素不会超过他上边的兄弟元素
    			 */
    			
    			.box2{600px;
    			height:300px;
    			background-color: yellow;
    			float:left;
    			}
    			.box3{200px;
    			height:200px;
    			background-color: blue;
    			float:left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box1"></div>
    		<div class="box2"></div>
    		<div class="box3"></div>
    	</body>
    </html>
    

      

    可以通过浮动设置文字环绕效果

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style>
    			#box1{100px;
    			height:100px;
    			background-color: yellow;
    			float:left;}
    			.p1{height:50;
    			background-color: blue;
    			color: red;}
    			
    		</style>
    	</head>
    	<body>
    		<div id="box1"></div>
    			<p class="p1">55551111111111111111111111111111111111
    			55555511111111111111111111111111111111111111111
    				111111111111111111111111111111111111111111111111
    				111111111111111111111111111111111111111111111111
    				111111111111111111111111111111111111111111111111
    			111111111111111111111111111111111111111111111111111
    			1111111111111111111111111111111111111111111111111111
    			111111111111111111111111111111111111111111111111111111
    			111111111111111111111111111111111111111111111111111111
    			1111111111111111111111111111111111111111111111111111</p>
    	</body>
    </html>
    

      

    内联元素设置浮动就可以变成内连元素

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style>
    			#box1{100px;
    			height:100px;
    			background-color: yellow;
    			float:left;}
    			.p1{/*内联元素脱离文档流会变成块元素*/
    				float: right;
    				height:100px;
    			100px;
    			background-color: blue;
    			color: red;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="box1"></div>
    			<span class="p1">111</span>
    	</body>
    </html>
    

      

    下面是一个简单的页面排版:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			*{padding: 0;
    			margin: 0;}
    			.header{ 1000px;
    			height: 150px;
    			background-color: yellowgreen;
    			margin: 10px auto;}
    			
    			.content{ 1000px;
    			height: 400px;
    			background-color: yellow;
    			margin: 10px auto;
    			}
    			
    			.left{ 200px;
    			height: 400px;
    			background-color: skyblue;
    			float: left;}
    			
    			.height{ 600px;
    			height: 400px;
    			background-color: orange;
    			float: left;
    			margin: 0 10px;}
    			
    			.bottom{ 180px;
    			height: 400px;
    			background-color: blue;
    			float: left;
    			}
    		
    		
    			
    			.footer{ 1000px;
    			height: 120px;
    			background-color: red;
    			margin: 10px auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="header"></div>
    		<div class="content">
    			<div class="left"></div>
    			<div class="height"></div>
    			<div class="bottom"></div> 
    		</div>
    		<div class="footer"></div>
    	</body>
    </html>
    

      

     

  • 相关阅读:
    wpf.xaml.behavior
    为你的硬件自动化统一构建root和firmware
    Dsm as deepin mate(2):在阿里云上真正实现单盘安装运行skynas
    Boot界的”开源os“ : coreboot,及再谈云OS和本地OS统一装机的融合
    0pe单文件夹,grub菜单全外置版
    阿里云上利用virtiope+colinux实现linux系统盘动态无损多分区
    比WEB更自然,jupyter用于通用软件开发的创新意义:使任何传统程序秒变WEB
    编程实践选型通史:*坦无架构APP开发支持与充分batteryincluded的微实践设施
    除了LINUX,我们真的有可选的第二开源操作系统吗?
    聪明的Mac osx本地云:同一生态的云硬件,云装机,云应用,云开发的完美集
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11360875.html
Copyright © 2011-2022 走看看