从零开始前端学习[18]:前端中重要的属性，浮动float属性

来源：互联网发布：天猫旗舰店的流量数据编辑：程序博客网时间：2024/05/23 02:01

前端中重要的属性，浮动float属性

浮动的初步认识
浮动的一般情况
浮动的特殊情况
浮动对文字的影响
浮动与inline-block区别
怎么去清除浮动

提示：
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

浮动的初步认识

浮动的定义：
使元素脱离文档流，按照指定的方向(左右)发生移动，遇到父边界或者相邻的浮动元素的时候，就会停下来。
文档流：
是文档中可现实对象在排列是所占用的位置/空间(在页面中占的位置)，那么脱离文档流就是在文档中不占用相应的位置而处于悬浮的状态，css中使用float来实现元素的浮动
浮动的属性

float:left;  //从左侧开始进行浮动float:right; //从右侧开始进行浮动

浮动的一般情况

从浮动的属性中可以看到，浮动的属性值有left和right，即左侧浮动和右侧浮动，所以浮动的一般情况中也就包含了两种情况，即左浮动和右浮动

默认的情况下是不浮动的:
如下代码所示:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px;height: 400px;box-shadow: 0 0 10px 0 darkslategray;margin: 50px auto}    .main div{width: 400px;box-shadow: 0 0 10px 0 red}    p{width: 100px;height: 100px;background: deeppink;box-shadow: 0 0 3px 0 green;color: white;font: bold 22px/100px "";text-align: center;}  </style></head><body>  <div class="main">    <div>      <p>1</p>      <p>2</p>      <p>3</p>    </div>  </div></body></html>

显示的效果:
这里写图片描述
在没有设置浮动的情况下，其会按块级元素进行纵向排列显示

左浮动

左浮动的定义很好理解，同样其属性也比较简单，即

float:left;//左浮动属性

即如下所示的情况:

这里写图片描述

     p{width: 100px;height: 100px;background: deeppink;box-shadow: 0 0 3px 0 green;color: white;font: bold 22px/100px "";text-align: center;float: left}

则显示的效果如下所示:
这里写图片描述

从上面的显示中可以看出，其显示的方向为按照1，2，3的排列顺序在横排从左往右开始显示

右浮动

右浮动也就是从右侧开始往左侧慢慢的显示，第一个标签对应在最右侧部位，然后标签依次从右开始往左进行排列
属性使用如下所示:

    float:right;//右浮动

这里写图片描述

对上面的代码进行修改，让其开始从右往左开始显示，即(右浮动)

    p{width: 100px;height: 100px;background: deeppink;box-shadow: 0 0 3px 0 green;color: white;font: bold 22px/100px "";text-align: center;float: right}

这里写图片描述

因为p标签的父级是一个width:400px的div,所以在遇到父级边界的时候，会停止浮动，所以停在了中间段

注意:
通过对比上述的案例，可以看到，没有添加浮动的时候，这个时候父级的div是包裹这p标签的，并且有阴影，但是在添加浮动之后，父级的高度好像没有了，只有在右浮动的时候才能感觉到父级的右侧边界，这就是添加浮动效果的一个弊端，造成了父级(没有设置高度)坍塌效果；后续讲解决办法
所有的元素无论是块级，或者是行级元素，或者行块级元素只要经过浮动的话，这个时候都会转换成行块级元素，支持宽高属性，并且其元素层级会提升半层左右

浮动的特殊情况

浮动的简单情况就是左右浮动属性的简单使用，但是浮动的特殊情况中，相对的应用条件就比较复杂了；

前面元素浮动，后面元素不浮动

如若前面一个元素浮动,后面元素没有浮动就会移动到它的下面，被它覆盖。（因为变为浮动元素以后只有遇到父边界或者相邻的浮动元素停下来）

即这里写图片描述

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px;height: 400px;box-shadow: 0 0 10px 0 darkslategray;margin: 50px auto}    .main div{width: 400px;box-shadow: 0 0 10px 0 red}    .main div p{width: 100px;height: 100px;background: deeppink;box-shadow: 0 0 3px 0 green;color: white;font: bold 22px/100px "";text-align: center;}    .main div .p1{float: left}    /*.main div .p2{float: right}*/  </style></head><body>  <div class="main">    <div>      <p class="p1" style="background: rgba(33,44,55,0.5)">1</p>      <p class="p2" style="width: 150px;height: 150px;line-height: 150px;">2</p>      <p>3</p>    </div>  </div></body></html>

显示效果如下:
这里写图片描述

设置了浮动之后，其脱离了文档流，提升半个层级，不占用原来的位置，所以后续元素会默认补齐其脱离文档流的位置。

前面元素不浮动，后面元素给予浮动

如果父级宽度太窄，无法去容纳所有的浮动元素，那么这个时候浮动的元素就会换行显示

这里写图片描述
其分成两种情况，一种是前面一个元素没有浮动，独占一行，那么浮动后元素不会换行显示，但是提升半个层级，
另外一种是前面一个元素浮动，但是其宽度过宽，剩余位置不足以容纳浮动的元素，这个时候浮动的元素也会换行显示；

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px;height:800px;box-shadow: 0 0 10px 0 darkslategray;margin: 50px auto}    .main div{width: 400px;box-shadow: 0 0 10px 0 red}    .main p{width: 100px;height: 100px;background: deeppink;box-shadow: 0 0 3px 0 green;color: white;font: bold 22px/100px "";text-align: center;}    /*.main div .p1{float: left;width: 360px;height: 360px}*/    .main div .p2{float: left}    .main div .p4{width: 250px;height: 250px;float: left;line-height: 250px}    .main div .p5{width: 200px;height: 200px;float: left;line-height: 200px}  </style></head><body>  <div class="main">    <div>      <p class="p1" style="background: rgba(33,44,55,0.5)">1</p>      <p class="p2" style="width: 50px;height: 50px;line-height: 50px;">2</p>      <p class="p3" style="width: 100px;height: 100px">3</p>    </div>    <div>      <p class="p4">4</p>      <p class="p5">5</p>    </div>  </div></body></html>

两种情况显示效果如下

这里写图片描述
父级造成了坍塌，所以第二个并没有显示出父级的边框与样式

以换行的那个元素为标准，如果有浮动元素的高度大于换行的那个元素,那么当换行元素换行时会被高的那个元素“卡住”

这是什么意思呢？先看一张图:

这里写图片描述

就是说2增加了浮动，3也是增加了浮动，但是1的高度要高于2和3的高度，这个时候3在浮动的过程中，没有办法位移到与1底部平齐的地方，这也就是被卡主的感觉

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }      .main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: auto}      .main div{        width: 600px;        height: 500px;        margin: auto;        box-shadow: 0 0 10px 0 deepskyblue;      }     p{width: 200px ;height: 200px;box-shadow: 0 0 12px 0 red;float: left;font: bold 22px/200px "";color: black;text-align: center;background: greenyellow}    .main div .p1{width: 250px;height: 250px}    .main div .p2{}    .main div .p3{}  </style></head><body>    <div class="main">      <div>        <p class="p1">1</p>        <p class="p2">2</p>        <p class="p3">3</p>      </div>    </div></body></html>

显示如下:

这里写图片描述

标签块3在浮动的时候，第一行不足以让其浮动，所以需要换行，但是换行后，因为第一个元素的高度大于其正常高度，那么这个时候就会让其不能放置到与第一个元素平齐的位置，也就是一种被卡主的感觉

这样的浮动在实际过程中需要我们用控制台来进行很好的调试

浮动对文字的影响

浮动框只会占据自己的位置，使文字可以围绕浮动框显示

浮动前
这里写图片描述

浮动后
这里写图片描述

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }        .main {width: 1200px;margin: 10px auto;border: 1px solid red}        .main div{width: 500px ;height: 300px;border: 1px solid greenyellow}        p{width: 100px;height: 100px;background: deepskyblue}        .main div p{float: left}  </style></head><body>  <div class="main">    <div>      <p></p>        　一样地想想蓝天，      　　一样地看看大海。      　　告诉你你的很多不懂，      　　相解你你的很多忧愁。      　　很愿意给你挡风遮雨，      　　很愿意为你做任何大小事。      　　靠近你听你说很多心中话，      　　我愿在身边陪你一生一世。      一样地想想蓝天，      　　一样地看看大海。      　　告诉你你的很多不懂，      　　相解你你的很多忧愁。      　　很愿意给你挡风遮雨，      　　很愿意为你做任何大小事。      　　靠近你听你说很多心中话，      　　我愿在身边陪你一生一世。    </div>  </div></body></html>

显示效果如下所示:

这里写图片描述

文字在两浮动框之间

这里写图片描述

这个就不演示了，效果其实如上所示:

浮动与inline-block区别

前面说浮动元素和inline-block很相似，浮动过后的特点就是其转换成了行快级元素的类型

任何元素都可以浮动。而不论它本身是何种元素，浮动元素会生成一个块级框。

float浮动

若果是块级可以横排显示如果是行级也支持宽高元素没有设置宽高时，内容撑开支持margin，但不支持margin：auto;脱离文档流提升层级半层

inline-block

横排显示支持宽高内容撑开宽高支持margin，不支持margin:auto标签空格被解析

怎么去清除浮动

为什么要去清除浮动？？？

浮动元素如果没有设置固定宽高的话，因为浮动后，元素脱离了文档流，所以不在父级中占有位置，这就导致了父级的上标签和下标签重叠了，也就是所谓的父级坍塌，在之前的第一个案例中也出现了，父级的背景消失不见了；
浮动前的效果:

这里写图片描述
浮动后的效果:

这里写图片描述

清除浮动的使用方法:

.clearfix:after{    content:"";    display:block;    clear:both;}

这是在浮动元素的父级上使用的，对第一个案例进行修正:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">  <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">    body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}    ul,ol{margin: 0; list-style: none; padding: 0;}    a{ text-decoration: none; }    *{ margin: 0; padding: 0; }    .clearfix:after{      content: "";      display: block;      clear: both;    }    .main{width: 1200px;height: 400px;box-shadow: 0 0 10px 0 darkslategray;margin: 50px auto}    .main div{width: 400px;box-shadow: 0 0 10px 0 red}     p{width: 100px;height: 100px;background: deeppink;box-shadow: 0 0 3px 0 green;color: white;font: bold 22px/100px "";text-align: center;float: left}  </style></head><body><div class="main">  <div class="clearfix">    <p>1</p>    <p>2</p>    <p>3</p>  </div></div></body></html>

显示如下所示:
这里写图片描述

可以看到父级的边界出现了，父级不会出现坍塌现象

关于浮动使用的几点建议:
将浮动封装成类选择器:

.f_l{    float:left;}.f_r{    float:right;}.clearfix:after{    content:"";    display:block;    clear:both;}

在使用的时候作为class引入，因为一个元素的class数量是没有限制的，可以有很多个，所以只要找到支持的就可以了

阅读全文

1 0