CSS基础(六):浮动深入

参考了《CSS彻底设计研究》的文章,说的很不错,所以拿来做笔记。

浮动

在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素边界;而在竖直方向和兄弟元素依次排列,不能并排。使用浮动方式后,块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。

CSS中有float属性,默认为none,也就是标准流通常的情况。如果将float属性设置为left或right,元素就会向其父元素的左侧或右侧紧靠,同时默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来确定。

准备代码

先制作一个页面,然后再设置浮动进行分析。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }
.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }
.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }
.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }
    
.son1{
/* 这里设置son1的浮动方式*/
}
.son2{
/* 这里设置son1的浮动方式*/
}
.son3{
/* 这里设置son1的浮动方式*/
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>
    </div>
</body>
</html>

设置第1个浮动div 

可以看到标准流中的Box-2的文字在围绕着Box-1排列,此时Box-1的宽度不再伸展,而是能容纳下内容的最小宽度。那么Box-2的盒子宽度范围如何确定呢?用Firebug可以发现,是与Box-1的左边框重合,因为此时Box-1已经脱离标准流,标准流中的Box-2会顶到原来Box-1的位置,而文字会围绕着Box-1排列。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }
.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }
.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }
.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }
    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}
.son2{
/* 这里设置son1的浮动方式*/
}
.son3{
/* 这里设置son1的浮动方式*/
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>
    </div>
</body>
</html>

设置第2个浮动div

将Box-2的float属性也设置为left,可以看到Box-2也变为根据内容确定宽度,并使Box-3的文字围绕Box-2排列。Box-2的盒子宽度

也是与Box-1的左边框重合,Box-1和Box-2之间的空白是由两者的空白叠加而形成的。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }
.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }
.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }
.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }
    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}
.son2{
/* 这里设置son1的浮动方式*/
float:left;
}
.son3{
/* 这里设置son1的浮动方式*/
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>
    </div>
</body>
</html>

设置第3个浮动div

可以看到文字会围绕浮动的的盒子排列。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }
.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }
.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }
.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }
    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}
.son2{
/* 这里设置son1的浮动方式*/
float:left;
}
.son3{
/* 这里设置son1的浮动方式*/
float:left;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>
    </div>
</body>
</html>

改变浮动的方向

将Box-3改为向右浮动,可以看到Box-3移动到了最右端,文字段落盒子的范围没有改变,但是文字变成了夹在Box-2和Box-3之间。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }
.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }
.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }
.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }
    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}
.son2{
/* 这里设置son1的浮动方式*/
float:left;
}
.son3{
/* 这里设置son1的浮动方式*/
float:right;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>
    </div>
</body>
</html>

当慢慢缩小浏览器窗口时,Box-2和Box-3的距离会越来越小,文字会布满空间,但缩小到一定程度时,Box-3会被挤到下一行,但仍保持向右浮动。

再次改变浮动的方向

将Box-2改为向右浮动,Box-3改为向左浮动。布局和上面例子一样。

View
 Code

当慢慢缩小浏览器窗口时,Box-2和Box-3的距离会越来越小,文字会布满空间,但缩小到一定程度时,Box-3会被挤到下一行,但仍保持向左浮动。

清除浮动

使用clear属性清除浮动,设置为left,消除左边浮动的影响;设置为right,消除右边浮动的影响;当设置为both,同时消除左右两边浮动的影响。后面将会在CSS技巧教程中介绍到。 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android知识点总结

D6-Android绘图之一言不合画个表

12940
来自专栏codelang

用kotlin来实现一个饼图

11620
来自专栏菜鸟前端工程师

html+css学习笔记005-font属性0text属性

14730
来自专栏coding for love

CSS进阶05-行内格式上下文IFC

IFC的英文全称是:Inline Formatting Contexts,直译为“行内格式化上下文”。 IFC由一个不包含块级盒的块容器盒生成。 在行内格式...

11430
来自专栏腾讯NEXT学位

我不知道你知不知道但前端NEXT知道的伪元素小技巧

36870
来自专栏HenCoder

Android 开发进阶: 自定义 View 1-1 绘制基础

从今天开始,HenCoder 就正式开讲知识技能了。按照我的计划,第一季是 UI,UI 一共分为三部分:绘制、布局和触摸反馈。本期是绘制部分的第一期。绘制大概会...

14220
来自专栏移动开发

安卓属性动画小技巧

很多人第一次看到 view 的 getX getY 方法以为是取得相对于整个屏幕上的坐标,很容易在写一些动画效果出现不是预期的效果。

16440
来自专栏walterlv - 吕毅的博客

WPF 绘制对齐像素的清晰显示的线条

发布于 2017-12-12 13:49 更新于 2018-08...

16610
来自专栏HTML5学堂

CSS3圆角边框“完全解读”

HTML5学堂小编:圆形,一个很奇妙的形状,在各种地方都可以看得到,特别是现在各类网站,都会有各种的圆形。圆角的制作曾经困扰了开发者很久,以至于以前开发者只能使...

55150
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线

36840

扫码关注云+社区

领取腾讯云代金券