CSS Float(浮动)

2019独角兽企业重金招聘Python工程师标准>>>

什么是CSS Float(浮动)?

CSS的Float(浮动)，元素可以围绕其他元素向左或向右被推动

Float(浮动)，往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或右。通常，这意味着尽所有的可能在所有包含元素的左侧或右侧的。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边:

img
{
float:right;
}

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们已经对图片廊使用float属性：

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

清除浮动 - 使用clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性

。clear属性指定其他元素双方都不能使用元素的浮动功能。

使用clear属性往文本中添加图片廊：

.text_line
{
clear:both;
}

所有CSS浮动属性

"CSS" 列中的数字表示不同的CSS版本 (CSS1 or CSS2)定义了该属性。

属性	描述	值
clear	指定不允许元素周围有浮动元素	left right both none inherit
float	指定Box是否可以浮动	left right none inherit

转载于:https://my.oschina.net/wybo521/blog/603803

CSS 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性质的文字环绕图片显示,而其他所有用浮动实现的效果都不是 ...