2020-11-25 09:48发布
float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。
CSS世界中的float属性是一个年代非常久远的属性，设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了float属性的元素会从普通文档流中脱离，相当于不占据任何空间，所以文档中普通流中的元素表现的就像浮动元素不存在一样，因此，设置float属性的后会影响我们的页面布局。具体说来就是：让block元素无视float元素，让inline元素像流水一样围绕着float元素实现浮动布局。
float属性设计的初衷：仅仅是让文字像流水一样环绕浮动元素。
浮动是指的是css的属性float。对于设置了浮动的元素，在页面效果上可以通俗的理解为“这个元素漂起来了（在水上）”，位置发生变化，不按HTML代码中排列。从定义上理解，即该元素脱离了文档流（常规流）。
以下是MDN web docs中关于浮动的描述：
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
浮动主要解决的问题是盒子并排，行内元素和行内块元素添加浮动属性会取消中间的间距，块级元素添加浮动可以实现并排。由于浮动子元素并不参与浏览器的高度计算就会导致父盒子高度塌陷问题，此问题一出现就会影响后续元素的布局，下面元素会向上移，此时就需要清除浮动带来的影响了。
浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”
浮动是网页中创建多列布局最常用的工具之一。css的定位机制分为标准流、浮动、定位。标准流也称为正常文档流，指的是元素默认的布局方式，如：块级元素默认垂直布局，行级元素和行块元素默认水平布局。
浮动是使元素脱离正常文档流，按照指定方向发生移动，直到碰到它父元素的边界或另一个浮动元素的边界为止。也就是说浮动是让元素沿着水平方向移动。
可以通过float属性来设置浮动。常用属性值包含left表示元素左浮动、right表示右浮动、none是默认值，表示不浮动。
css浮动最开始主要是为了报纸的排版，可以让文字在图片周围环绕
一、元素浮动的意义及使用：1. 浮动的意义：设置了浮动属性的元素会脱离普通标准流的控制，移动到其父元素中指定的位置的过程，将块级元素放在一行，浮动会脱离标准流，不占位置，会影响标准流，浮动只有左右浮动，不会出现上下浮动。2. 浮动的使用：基本语法格式：选择器{float:属性值;}left 元素向左浮动 right 元素向右浮动 none 元素不浮动
二、元素浮动的特性：1. 浮动的元素脱离了标准文档流，摆脱块级元素和行内元素的限制1）这是两个div盒子以及一个span元素在没有设置浮动情况下的样子：
2）这是两个div盒子以及一个span元素在同时设置浮动情况下的样子：
3）比较进行分析，在三个盒子同时设置了浮动的情况下，名为box2的div的盒子脱离了标准文档流，漂浮到了box1盒子的右边，而名为box3的span的行内元素，可以设置宽高等属性并且脱离了标准文档流，漂浮到了box2盒子的右边。由此，可以进行验证分析出来了，浮动的元素可以摆脱标准文档流的控制，进行漂浮，不遵循自上到下的顺序，同时行内元素也可以转换为行内块级元素，设置宽高对齐属性等，块级元素也可以转换为行内块级元素，与其漂浮的盒子在一行等等，摆脱了块级元素和行内元素的限制。
css浮动和定位还有盒子模型，写几个案例理解就可以的啦，
一、position 的四个值：static、relative、absolute、fixed。绝对定位：absolute 和 fixed 统称为绝对定位相对定位：relative默认值：static二、relative定位与absolute定位的区别实例：HTML代码：css代码：初始效果：1、relative：相对于原来位置移动，元素...
1.static:正常文档定位，此时top,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左往右排列2.relative: 相对定位，此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝...
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进...
浮动和定位都可以使元素脱离标准文档流,提升层级, 浮动脱离文档流，提高半个层级，不能完全覆盖下面元素（不能覆盖图片文字）定位脱离标准文档流，提升一个层级，可以完全覆盖下面元素及其内容...
绝对定位就是你的位置已经不属于你了，你只能漂浮在半空中。相对定位就是你的位置你还占用的，人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的，都找不到的话就以body窗口来定位。...
定位：1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...
引言：这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的...
同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]
BFC 是 Block Formatting Context（块级格式化上下文）的缩写，它是为了解决如下问题：浮动定位外边距合并清除浮动自适应多栏布局
一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，p...
css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear，官方定义如下： 语法： clear : none | left | right | both 取值： none : 默认值。
如果不定义浮动的话，各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。同样，如果定义了float:right，那么这个div就会出现在...
1、 元素类型的转换（display属性）Display属性属性值：BlockInlineNone大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）大部分内联元素默认的display值为inline，其中input默认的值为：inline-block;（行内块元素）；内联元素...
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 慢半拍 的问题《【Web前端基础】css浮动怎么理解》','http://www.shouhuola.com/q-31327.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。
CSS世界中的float属性是一个年代非常久远的属性，设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了float属性的元素会从普通文档流中脱离，相当于不占据任何空间，所以文档中普通流中的元素表现的就像浮动元素不存在一样，因此，设置float属性的后会影响我们的页面布局。具体说来就是：让block元素无视float元素，让inline元素像流水一样围绕着float元素实现浮动布局。
float属性设计的初衷：仅仅是让文字像流水一样环绕浮动元素。
浮动的概念
浮动是指的是css的属性float。对于设置了浮动的元素，在页面效果上可以通俗的理解为“这个元素漂起来了（在水上）”，位置发生变化，不按HTML代码中排列。从定义上理解，即该元素脱离了文档流（常规流）。
以下是MDN web docs中关于浮动的描述：
浮动主要解决的问题是盒子并排，行内元素和行内块元素添加浮动属性会取消中间的间距，块级元素添加浮动可以实现并排。由于浮动子元素并不参与浏览器的高度计算就会导致父盒子高度塌陷问题，此问题一出现就会影响后续元素的布局，下面元素会向上移，此时就需要清除浮动带来的影响了。
浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”
浮动是网页中创建多列布局最常用的工具之一。css的定位机制分为标准流、浮动、定位。标准流也称为正常文档流，指的是元素默认的布局方式，如：块级元素默认垂直布局，行级元素和行块元素默认水平布局。
浮动是使元素脱离正常文档流，按照指定方向发生移动，直到碰到它父元素的边界或另一个浮动元素的边界为止。也就是说浮动是让元素沿着水平方向移动。
可以通过float属性来设置浮动。常用属性值包含left表示元素左浮动、right表示右浮动、none是默认值，表示不浮动。
css浮动最开始主要是为了报纸的排版，可以让文字在图片周围环绕
一、元素浮动的意义及使用：
1. 浮动的意义：设置了浮动属性的元素会脱离普通标准流的控制，移动到其父元素中指定的位置的过程，将块级元素放在一行，浮动会脱离标准流，不占位置，会影响标准流，浮动只有左右浮动，不会出现上下浮动。
2. 浮动的使用：基本语法格式：选择器{float:属性值;}
left 元素向左浮动 right 元素向右浮动 none 元素不浮动
二、元素浮动的特性：
1. 浮动的元素脱离了标准文档流，摆脱块级元素和行内元素的限制
1）这是两个div盒子以及一个span元素在没有设置浮动情况下的样子：
2）这是两个div盒子以及一个span元素在同时设置浮动情况下的样子：
3）比较进行分析，在三个盒子同时设置了浮动的情况下，名为box2的div的盒子脱离了标准文档流，漂浮到了box1盒子的右边，而名为box3的span的行内元素，可以设置宽高等属性并且脱离了标准文档流，漂浮到了box2盒子的右边。由此，可以进行验证分析出来了，浮动的元素可以摆脱标准文档流的控制，进行漂浮，不遵循自上到下的顺序，同时行内元素也可以转换为行内块级元素，设置宽高对齐属性等，块级元素也可以转换为行内块级元素，与其漂浮的盒子在一行等等，摆脱了块级元素和行内元素的限制。
css浮动和定位还有盒子模型，写几个案例理解就可以的啦，
相关问题推荐
一、position 的四个值：static、relative、absolute、fixed。绝对定位：absolute 和 fixed 统称为绝对定位相对定位：relative默认值：static二、relative定位与absolute定位的区别实例：HTML代码：css代码：初始效果：1、relative：相对于原来位置移动，元素...
1.static:正常文档定位，此时top,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左往右排列2.relative: 相对定位，此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝...
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进...
浮动和定位都可以使元素脱离标准文档流,提升层级, 浮动脱离文档流，提高半个层级，不能完全覆盖下面元素（不能覆盖图片文字）定位脱离标准文档流，提升一个层级，可以完全覆盖下面元素及其内容...
绝对定位就是你的位置已经不属于你了，你只能漂浮在半空中。相对定位就是你的位置你还占用的，人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的，都找不到的话就以body窗口来定位。...
定位：1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...
引言：这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的...
同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]
css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...
BFC 是 Block Formatting Context（块级格式化上下文）的缩写，它是为了解决如下问题：浮动定位外边距合并清除浮动自适应多栏布局
一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，p...
css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear，官方定义如下： 语法： clear : none | left | right | both 取值： none : 默认值。
如果不定义浮动的话，各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。同样，如果定义了float:right，那么这个div就会出现在...
1、 元素类型的转换（display属性）Display属性属性值：BlockInlineNone大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）大部分内联元素默认的display值为inline，其中input默认的值为：inline-block;（行内块元素）；内联元素...