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元素实现浮动布局

 

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

相关推荐

CSS三栏布局——浮动

不使用定位,只使用浮动实现左右固定,中间宽度自适应布局实现关键:自适应部分一定要放在第一个位置,使用浮动,且宽度设置为100%,如果不设置为100%,浮动元素内容不够撑开整个宽度。左右固定部位,使用margin-left :负数,使其左右靠齐。中间自适应部分嵌套一个div,设置margin-left 和 margin-right 使其空出左右固定的宽度。代码如下:<!DOCTYPE HTML

Raku根据index删除字符串中的字符

示例说明:0123456789,删除索引为1-3,以及8的字符串,结果应该为:045679。实现my $a='0123456789';with $a {$_=.comb[(^* ∖ (1..3, 8).flat).keys.sort].join};say $a;可以简写为一行代码:say '0123456789'.comb[(^* ∖ (1..3, 8).flat).keys.sort].join

R语言根据name删除dataframe的列

根据名字删除dataframe里的列,可以使用subset函数。分为两种方式使用:1、知道想保留的列,使用subset显示保留。df <- data.frame(a = 1:10, b = 2:11, c = 3:12)df <- subset(df, select = c(a, c))示例中保留了a和c列2、指定删除的列,如上面例子中,要删除a和c列,如下:df <- subs

Nginx禁用ip访问

在Nginx配置禁用ip访问有两种方法:方法一:新增一个server,设置为默认的虚拟主机如下:server { listen 80 default; server_name _; return 403; }方法二、只允许指定域名进入listen 80; server_name www.example.com; if ($host !=

JavaScript:Map根据值查找对应的键

Map根据值查找键,可以使用for..of迭代Map的Entry,再判断Entry的值:键值一对一function getByValue(map, searchValue) {   for (let [key, value] of map.entries()) {   

Android:解决android.os.NetworkOnMainThreadException问题

原因当应用在主线程执行网络操作时会抛出此异常android.os.NetworkOnMainThreadException。解决方法把执行网络的操作的代码放到AsyncTask里可以避免此问题。示例:class MyConnectTas extends AsyncTask {     @Override  &