css中的浮动float

作者:fandonglai日期:2016-09-15 10:45:15 点击:505 浮动 float

网页的三种布局

自然布局

遵循元素自身的特性,在整个页面中,按照html的书写顺序,块级元素从上到下排列,行内元素从左到右排列,宽度达到最大值会自动折行。

浮动布局/流动布局

通过浮动float这个属性,改变元素的排列方式,可以让所有的元素在一行显示。

层布局

通过定位的属性,改变元素的位置,让元素层叠显示。

文档流

元素遵循自身的属性,根据html的书写顺序,块级元素从上到下排列,行内元素从做到右排列,宽度达到最大值会自动折行。

    <div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span</span>
<i>i</i>

浮动的属性

    float:left; 
/*左浮动*/
float:right;
/*右浮动*/
float:none;
/*设置为不浮动*/
float:inherit;
/*默认继承父级元素的浮动方式*/

认识浮动

浮动这个属性诞生其实只是用来实现一个简单的文字环绕图片而已,仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。

浮动的作用

会使元素向左或向右移动,其周围的元素也会重新排列。
浮动的元素可以左右移动,直到他的边缘碰到父级元素的边缘或另一个浮动元素的边缘

浮动的本质是什么?

浮动就是带有方向的display:inline-block(将元素转为行内块级元素)的属性

display:inline-block从某种意义上的作用就是让几个块级元素在一行显示
但是只要转为行内块级元素,浏览器就会读取代码之间的空格,在浏览器中解析为一段小的间距,那我们就要删除html代码之间的空格,很麻烦,但是浮动不会出现inline-block的问题,所以我们用浮动去代替inline-block。

浮动的应用

第一个作用:让几个盒子在一行显示

    <style>
li{
width: 100px;
height: 100px;
background: orange;
margin:10px;
float: left;
font-size: 36px;
/*float: left;
从浮动的盒子中第一个盒子开始,从左边开始,从左到右依次显示
float: right;
从右边开始,从第一个盒子开始,从右到左依次显示
*/

}

</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

第二个作用:让盒子靠右显示

    <style>
div{
width: 600px;
height: 300px;
background: blue;
}

div p{
width:300px;
height:50px;
background: yellow;
float: right;
}

</style>
<div>
<p>文字</p>
</div>

上一篇: css盒子模型

下一篇: 关于html的表单元素详解(二)