浮动float

1. float 基本属性

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1 {width: 600px;height: 200px;background-color: red;float: left;}.box2 {width: 600px;height: 200px;background-color: yellow;float: left;}.box3 {width: 200px;height: 200px;background-color: green;float: right;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body>
</html>

块元素在文档流中默认垂直排列，所以这三个 div 自上而依次排开
- 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用 float 来使元素浮动，从而脱离文档流
可选值：
- none，默认值，元素默认在文档流中排列
- left，元素会立即脱离文档流，向页面的左侧浮动
- right，元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后，（float 属性是一个非 none 的值），
- 元素会立即脱离文档流，元素脱离文档流后，他下边的元素会立即向上移动
- 元素浮动以后，会尽量向页面的左上或者是右上漂浮,
- 直到遇到父元素的边框或者其他浮动元素
  
  如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
  浮动的元素不会超他上边的兄弟元素，最多最多一边齐

float: left;

2. 环绕的float

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: #bfa;float: left;}.p1 {height: 200px;background-color: yellow;}</style></head><body><div class="box1"></div><p class="p1">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地〖目夹〗着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花上。我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼〖目夹〗眼；直刺着天空中圆满的月亮，使月亮窘得发白。鬼〖目夹〗眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地〖目夹〗着许多蛊惑的眼睛。哇的一声，夜游的恶鸟飞过了</p></body>
</html>

浮动的文字不会盖住文字，文字会自动环绕在浮动元素的周围
所以我们可以通过浮动来设置文字环绕图片的效果

3. float撑开内容

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1 {background-color: #bfa;/* float: left; */}.s1 {float: left;width: 100px;height: 100px;background-color: yellow;}</style></head><body><div class="box1">a</div><span class="s1">hello</span></body>
</html>

在文档流中，子元素的宽度默认占父元素的全部
当元素设置浮动以后，会完全脱离文档流,
- 块元素脱离文档流以后，高度和宽度都被内容撑开

float: left;

开启 span 的浮动
- 内联元素脱离文档流以后，高度和宽度都会被内容撑开

.s1 {float: left;width: 100px;height: 100px;background-color: yellow;
}

CSS-float浮动相关推荐

CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
php浮动边框设置属性,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
CSS float浮动布局
CSS float浮动布局 1. 清除浮动 2. 浮动边界 3. 浮动转换 4. 形状浮动控制环绕模式 5. 改变元素的显示区域属性值选项说明 left 向左浮动 right 向右浮动 non ...
（12）css—float浮动样式
一.什么是浮动? 浮动是一种非常重要的布局属性. 属性名:float,漂流.浮动的意思. 属性值:left 左浮动 right 右浮动作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示. ...
CSS float浮动的深入研究、详解及拓展一一一一一一一一
我们使用float浮动做了很多其本职工作以外的事情,于是我们会混淆,我们会回看不清float真正的面目.浮动真正的意义在哪里呢?要知道这个问题的答案很简单,假设现在CSS中没有浮动(float)属性, ...
CSS Float(浮动详解)
什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 最早是为了让w ...
CSS float浮动的深入研究、详解及拓展(二)
为什么80%的码农都做不了架构师?>>> 接上回- 五.浮动的非本职工作浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示,而其他所有用浮动实现的效果都不是 ...

CSS-float浮动

文章目录

浮动float

1. float 基本属性

2. 环绕的float

3. float撑开内容

CSS-float浮动相关推荐

最新文章

热门文章