float的基本用法

浮动

float:left;float:right;

和display的区别：

1、没有空格解析；

2、display的行内是以基线对齐的，使用margin-top会出现行内所有元素全部下移；

3、浮动没有基线问题；

4、display不能控制方向；

文档流

未设置浮动float，普通的html页面就是文档流，也叫做标准流

浮动的定义：

1、设置浮动的元素，遇到父级或者是相邻的浮动元素，会让浮动元素停止在原来位置不变；

2、如果上一个元素是标准流元素，那么这个浮动元素的相对垂直位置不变；

3、相邻的浮动元素会并排在一行（除非上一个元素是标准流元素）；

浮动的表现：

1、控制方向；

2、父级宽度不够，元素会被挤到下一行；

3、浮动会将元素改变为块元素类型；

使用浮动会造成父级的高度塌陷（浮动使得无法撑开父级容器的高度）

解决方法：给父级元素添加 overflow:hidden 样式;

使用的是bfc

float的基本用法相关推荐

python float函数是什么,Python float函数实例用法
Python float函数实例用法我们知道数字有很多种类型,比如整数.浮点数.在字符串值的讨论上,我们会需要用浮点值的形式,那么就需要函数来进行转换.float函数的功能正是如此,能够对其中的数值 ...
C语言Double的作用,C语言double和float 实例分析用法
C语言double和float 实例分析用法 C语言double和float 实例分析用法小数也称实数或浮点数.例如,0.0.75.0.4.023.0.27.-937.198 都是合法的小数.这是常 ...
c语言float的使用,C语言double和float实例分析用法
C语言double和float 实例分析用法 C语言double和float 实例分析用法小数也称实数或浮点数.例如,0.0.75.0.4.023.0.27.-937.198 都是合法的小数.这是常 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
CSS样式 float浮动用法
CSS样式 float浮动用法前言 Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>标签.<a>标签.<em>标 ...
mysql 空位补0_MySQL-13（表的创建、数值类型整型、float/decimal、ZEROFILL、BIT(M)）
# 1. 表的创建基本语法: CREATE TABLE table_name( column1 datatype, column2 datatype, column3 datatype )ch ...
html 自动悬浮,HTML 悬浮float介绍
关于float的一些用法左悬浮: float:left; 右悬浮:float:right; float用法 float的用途比较广, 这里简单的介绍下集中常有的用法: 在接触到浮动前,我会去设置一些 ...
css设置float,【CSS】float属性
float浮动属性 1.作用: 将页面元素浮动起来,使其能够向左或者向右排列 2.应用: 实现页面中布局的左右排版实现图文环绕的版式效果 3.值: 4.原理: 浮动元素将脱离默认的文档流,漂浮在默认 ...
Go --- Marshal与Unmarshal基础用法
go语言本身为我们提供了json的工具包"encoding/json". 前言: Json–Javascript Object Nanotation 是一种数据交换格式,经常用于前 ...
【万字长文】详解Python时间处理模块-datetime
datetime模块提供了用于处理日期和时间的类和对应的方法,一般用于处理年.月.日.时.分.秒的统计和计算等需求.在支持日期时间数学运算的同时,实现的关注点更着重于如何能够更有效地解析其属性用于格式 ...