静下心来的个人专栏
上一篇

float——浮动刨根问底

广告
选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。
大纲

浮动介绍

什么叫浮动呢?浮动是元素的一个属性。当Dom元素设置了float属性后,元素会向左或者向右浮动,直到它的外边缘碰到包含框或者另一个浮动框的边框为止。设置了浮动属性的元素会脱离文档流——不占据任何文档空间,所以普通文档流中的元素表现得像浮动元素不存在一样。

下面我们用代码来对浮动的定义以及特点进行说明:

首先,我新建一个基本的文档,文档的内容是一个box盒子里面分别包含left区,content区和right区:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>float definition</title>
   <style>
       .box{
            height: 500px;
            background-color: bisque;
       }
       .box .box-content {
            background-color: blue;
  		    width: 100%;
       }
       .box .box-left {
  			height: 200px;
            background-color: green;
       }
       .box .box-right {
  			height: 200px;
            background-color: pink;
       }
       header,footer {
            height: 75px;
            background-color: aqua;
       }
   </style>
</head>
<body>
   <header>
   </header>
   <div class="box"> 
       <div class="box-left">
           左边
       </div>
       <div class="box-content">
           内容区
       </div>
       <div class="box-right">
           右边
       </div> 
   </div>
   <footer>
   </footer>
</body>
</html>

如图所示,整个页面分为三个部分,分别是header,box和footer,而box又分为三个区域,左边区域,内容区域和右边区域。

为了验证浮动,我们这里会使用box区域进行试验。

1、box-left添加浮动

.box .box-left {
 	height: 200px;
    background-color: green;
  	float:left;
}

结合上图,我们分析一下:

当box中最左边的元素box-left添加float:left属性后,它向左浮动,它的前面没有浮动元素框,因此它的边缘碰到包含框box后就停了下来。

原来的box-left元素宽度是占据一行的,现在的宽度只有它本身的可撑开宽度。

box盒子中的内容区和right区域开始向上移动,占据了原来left区域的位置,这里有个特点,left区域和内容区的盒子框占据但是文字没有占据,如果文字比较多的话,会形成环绕浮动元素的效果。

浮动元素脱离了文档流,后面的元素表现得好像浮动元素不存在一样。

2、box-right添加浮动

.box .box-right {
    height: 200px;
    background-color: pink;
    float:left;
}

box-right添加了浮动以后,它也会开始向上和左浮动,这里有个问题是,按照浮动的定义,它前面有一个浮动框box-left,向左浮动后遇到浮动框停止,但是向上应该碰到包含框停止才对呀,可是有边的元素遇到中间的那个框以后就直接停止了,因此这里暂时记下这个问题。

总结一下:

float属性的影响就是:

让block元素无视float元素,让inline元素像流水一样围绕着float元素实现浮动布局

 

版权声明:著作权归作者所有。

X

欢迎加群学习交流

联系我们