css中的浮动

在写程序的过程中经常会遇到这样的问题：希望某一个块或者元素到我指定的区域。这就涉及到定位和浮动的问题，下面我将详细说明css中的浮动。

一、浮动（float）-------

正常文档流中：块级元素从上到下依次排列，内嵌元素从左到右依次排列。

浮动：顾名思义，指元素从正常文档流中脱离出来，按照我们的想法而使元素达到指定的区域位置的功能。

1、浮动的对象：css中我们可以浮动任何元素，包括段落、列表、div、图像等。

2、浮动的功能，浮动是基于css的现代web设计用到的主要功能之一：

　　a、它可以用来创建多列的网页布局；

　　b、从无序列表创建导航工具条；

　　c、不适用table而创建类似表格的对齐方式等。

3、浮动的属性：none （不浮动）、right（向右浮动）left（向左浮动）

示例：

float:left      在css中写　　.a {width：100px;height:100px;background:white;}

　　　　　　　　　　　　　　.b {width：30px;height:50px;background:gray;float:left;}  （float:right ）

　　　　　　　　　　　　　　.c {width：30px;height:50px;background:red;float:left;}   (float:right)显示结果是两个方块均靠右

　　　　　　　　　　在html 中调用 <div class="a">

　　　　　　　　　　　　　　　　　　<div class="b"></div>

　　　　　　　　　　　　　　　　　　<div class="c"></div>

　　　　　　　　　　　　　　　　　</div>

显示的结果是：在整个块c中，a显示在左边，b接在a的后面显示。  

float:right      在css中写　　.a {width:100px;height:100px;background:yellow;}

　　　　　　　　　　　　　　.b {width:30px;height:50px;background:gray;float:left;}  （float：right）

　　　　　　　　　　　　　　.c {width:30px;height:50px;background:red;float:right;}  （float：left）显示结果同下图相同

　　　　　　　　　　在html 中调用 <div class="a">

　　　　　　　　　　　　　　　　　　<div class="b"></div>

　　　　　　　　　　　　　　　　　　<div class="c"></div>

　　　　　　　　　　　　　　　　　</div>

显示的结果是：在整个块c中，a靠左padding区域内，b靠右显示在c的padding区。

 

 

4、浮动的基本行为：

　　a、当float不等于none引起浮动时，元素将被视作块级元素（即浮动只对块级元素产生影响），若想要对内嵌元素产生浮动，需将内嵌元素定义为块级元素（使用　　display:block）。

　　b、当需要对一个段落进行浮动时，需要指定该元素的宽度（width），不然，元素内容会折叠刀最可能的最小宽度。

　　c、浮动的元素会停留在它的父级元素padding区域内。

　　d、浮动元素的margin不会重合。

　　e、不被块级元素包含的浮动元素的顶部不能比前面的块级元素高。

产生浮动后，我们在某些时候希望浮动能被清除掉，使我们后面的元素能按照正常的文档流执行。

 

二、清除浮动（clear）

clear：阻止一个元素出现在浮动元素的后面，使clear后面的元素能按照文档流的正常顺序执行。

clear属性:none （两边都可以有浮动元素）   left （不允许左边出现浮动元素） right （不允许右边出现浮动元素）  both（两边都不允许出现浮动元素）

  （温馨提示：none   和  both一定不要弄反了哦，我自己刚开始就。。。。你懂得！）

clear 只能用于块级元素

 

转载于:https://www.cnblogs.com/autumn123/p/3976476.html