CSS学习10[重点]--浮动、浮动的效果以及内幕特性

CSS布局------浮动

• 前言
• 一、普通流
• 二、浮动
• 三、什么是浮动?
• 四、浮动的内幕特性
• 总结

前言

CSS盒子布具的三种机制：普通流（标准流）、定位、浮动。

---

一、普通流

普通流：网页内元素自上而下，从左到右排序。

二、浮动

1. 浮动最开始的时候浮动是做文字环绕效果

   <html>
   <head>
   	<style>
   	div {
   		width: 200px;
   		height: 100px;
   		margin: 0 auto;
   	}
   	img {
   		float: right;
   	}
   	</style>
   </head>
   <body>
   	<div>
   	123899hj9d
   	<img src="#.png" width="12" height="10" alt="">
   	</div>
   </body>
   </html>

2. 后来发现可以用浮动布局盒子

三、什么是浮动?

1. 普通流改到浮动

   <html>
   <head>
   	<style>
   	div {
   		width: 200px;
   		height: 100px;
   		background-color: pink;
   		display: inline-block; /*转换为行内块元素，放到一行但是元素中间有空格*/
   		float: left; /*左侧浮动 一行排列没有空隙*/
   	}
   	div:nth-child(2) {
   		background-color: hotpink;
   	}
   	div:last-child {
   		background-color: deeppink;
   	}
   	</style>
   </head>
   <body>
   	<div>
   	</div>
   	<div>
   	</div>
   </body>
   </html>

2. 实现块级元素放在一行。用display转换为行内块元素，但是此时div之间的空格难以去掉。用float: left; 可以放在一行且没有空格。

3. 元素的浮动指定了浮动属性的元素脱离标准流，移动到父元素中指定位置的过程。在CSS中用float属性来定义浮动，其基本语法格式：

   float: left;

   float: right;

   float: none;

4. 具体来说，浮动体现在脱离标准流，压在标准流上面。

   <html>
   <head>
   	<style>
   	div:first-child {
   		width: 200px;
   		height: 100px;
   		background-color: pink;
   		float: left; /*加入这行，第一个盒子浮动到最上面，第二个盒子在底层从左上开始*/
   	}
   	div:last-child {
   		width: 200px;
   		height: 700px;
   		background-color: blue;
   	}
   	/*如果两个盒子不加浮动，都是标准流，块级元素自上而下显示*/
   	</style>
   </head>
   <body>
   	<div>
   	</div>
   	<div>
   	</div>
   </body>
   </html>

四、浮动的内幕特性

1. 浮动脱离标准流，不占位置，压在标准流上面。浮动只有左右浮动。

2. 使用的时候需要首先创造包含块 的概念，即浮动的元素找它最近的父级元素对齐，但不超出内边距。

   <html>
   <head>
   	<style>
   	.father {
   		width: 200px;
   		height: 100px;
   		background-color: pink;
   		border: 10px solid purple;
   		padding: 10px;
   	}
   	.son {
   		width: 100px;
   		height: 50px;
   		background-color: blue;
   		float: left; 
   	}
   	</style>
   </head>
   <body>
   	<div class="father">
   		<div class="son">
   		</div>
   	</div>
   </body>
   </html>

3. 浮动元素的排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

   <html>
   <head>
   	<style>
   	section {
   		width: 500px;
   		height: 500px;
   		background-color: pink;
   		padding: 10px;
   	}
   	section div:first-child {
   		width: 100px;
   		height: 50px;
   		background-color: blue;
   		float: left; 
   	}
   	section div:last-child {
   		width: 100px;
   		height: 50px;
   		background-color: purple;
   		float: left; 
   	}
   	</style>
   </head>
   <body>
   <section>
   	<div>1</div>
   	<div>2</div>
   </section>
   </body>
   </html>

   • 一个父盒子里面的子盒子，如果有一个子级有浮动，则其他子级都需要浮动。这样才能一行对齐显示。

   • 元素添加浮动之后，具有行内块特性。元素的大小取决于定义的大小或者默认的内容大小。

     <html>
     <head>
     	<style>
     	div {
     		width: 500px;
     		height: 500px;
     		background-color: pink;
     		float: left;  /*块级元素浮动之后 具有行内块特性*/
     	}
     	span {
     		height: 100px;
     		background-color: hotpink;
     		float: left;  /*行内元素浮动之后 具有行内块特性*/
     	}
     	/*行内块特性 可以一行放多个 具有宽度和高度 盒子的大小由内容决定*/
     	</style>
     </head>
     <body>
     <section>
     	<div>1</div>
     	<div>2</div>
     	<span>123</span>
     	<span>123</span>
     </section>
     </body>
     </html>

---

总结

浮动的目的为了让多个块级元素同一行显示。

float 浮漏特

浮：加了浮动的元素盒子是浮起来的，漂浮在标准流盒子上面

漏：加了浮动的盒子不占位置，原来的位置漏给了标准流盒子

特：特别注意，浮动的盒子需要和标准流的父类搭配使用，浮动可以使元素显示模型表现为行内块特性