CSS教程】【Web前端基础】css浮动的作用是什么

2020-11-24 09:46发布

11条回答
草莓juzizhi
2楼 · 2020-11-24 10:08

如果不定义浮动的话,各个div的内容在页面上是由上向下排列的。

而如果某个div定义了float: left,那么这个div就会出现在上层div下最靠左的位置,而与它同一等级,但列在它后面的div就会显示在他的右侧了。

同样,如果定义了float:right,那么这个div就会出现在上层div下最靠右的位置,而与它同等级,但列在它前面的div就会显示在他的左侧。

两栏或多栏式页面布局就会用到它。


茄子酱
3楼 · 2020-11-24 10:26

要想搞清浮动这个问题,得先搞清html元素的两种状态,
块元素,或内联元素。
1. 块元素有物理属性,会占据一行,能设置宽高等特性,多个块元素会分行显示。
块元素代表人物:div,p等
2. 而内联元素没有物理属性,不会占据一行,多个内联元素会并排显示,
内联元素的代表人物:span,em,b,i等。
3. 有时候的需求就是,想让某个元素并排显示,并且具有可设置的物理属性,这时候就需要float出场。因为html是表结构,他不负责表现层面的东西,这时候需要一个css属性来解决这样的一个问题,float应用而生。
简单的解释就是:他是让块元素对外呈现内联元素的特性,对内呈现块元素的特性
这句话是不是跟display:inline-block的意思,一样呢,其实就是这样。但display:inline-block的兼容性不怎么好,在ie6下面会有间距产生,所以float用的比较多一点。
4. float并不是没有坏处,float之后,会对以后的兄弟元素产生影响,所以要必须css清除一下,才使兄弟元素正常显示。

不吃鱼的猫
4楼 · 2020-11-24 10:28

避免换行,让元素左右浮动

Sophia
5楼 · 2020-11-24 10:32

因为DIV都是块元素,默认情况下每插入一个DIV都会换行,所以在这种情况下我们就要用到CSS中的:float

来让DIV浮动起来

float:

left

是向左浮动

float:

right

是向右浮动

为了让浏览器能正常显示一般情况下我们还要给写有浮动地方的最后面加上一个

清除浮动

以便于在浏览器中能正常显示出来


爱梦 - 拿来吧你
6楼 · 2020-11-24 10:34

要想搞清浮动这个问题,得先搞清html元素的两种状态,
块元素,或内联元素。
1. 块元素有物理属性,会占据一行,能设置宽高等特性,多个块元素会分行显示。
块元素代表人物:div,p等
2. 而内联元素没有物理属性,不会占据一行,多个内联元素会并排显示,
内联元素的代表人物:span,em,b,i等。
3. 有时候的需求就是,想让某个元素并排显示,并且具有可设置的物理属性,这时候就需要float出场。因为html是表结构,他不负责表现层面的东西,这时候需要一个css属性来解决这样的一个问题,float应用而生。
简单的解释就是:他是让块元素对外呈现内联元素的特性,对内呈现块元素的特性
这句话是不是跟display:inline-block的意思,一样呢,其实就是这样。但display:inline-block的兼容性不怎么好,在ie6下面会有间距产生,所以float用的比较多一点。
4. float并不是没有坏处,float之后,会对以后的兄弟元素产生影响,所以要必须css清除一下,才使兄弟元素正常显示。

小小李兆佳
7楼 · 2020-11-24 11:05

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。


1234
8楼 · 2020-11-24 11:27

浮动元素:float,可以取值左和右。它的意思就是指可以向左或向右浮动,直到碰到包围框的边上或者上一个浮动框的边上为止。浮动元素不占用普通文档的空间,而且层级高于普通文档流中的元素层级、飘在普通元素的上方。

需要注意的是,行内元素和块元素这块,因为都知道如果给行内元素设置宽和高的话,浏览器是没有任何反应的,因为行内元素的宽高是根据标签内的内容宽高而定的,但是如果在行内元素中使用css中的浮动元素的话,则可以设置宽和高,因为当行内元素使用浮动以后,行元素将变成块元素。

还有,既然用到浮动元素,就要用到清除元素clear作用就是清除上方的浮动特性,取值为左—left、右—right、两者都—both。


听雨
9楼 · 2020-11-24 21:37

浮动能做什么:浮动能够让任意元素在一行内按照指定的方式(从左到有, 或者从右到左)排列。

为什么要用浮动:HTML正常的文档流都是从上到下, 从左到右;比如块级元素只能从上到下,并且不能一行内排列; 比如行内元素在一行内从左到右一行排列等等, 浮动元素可以让开发者灵活设置元素的排列方式。

浮动的特点:1、浮动可以提升元素的层级;2、浮动元素将不占位; 3、浮动元素可以设置宽高margin等。

相关问题推荐

  • 回答 11

    一、position 的四个值:static、relative、absolute、fixed。绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative默认值:static二、relative定位与absolute定位的区别实例:HTML代码:css代码:初始效果:1、relative:相对于原来位置移动,元素...

  • 回答 14

    1.static:正常文档定位,此时top,bottom,left和z-index属性无效,块级元素从上往下纵向排布,行级元素从左往右排列2.relative: 相对定位,此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移,来确定元素位置,比如一个绝...

  • 回答 8

    设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素相对于它的起点进...

  • 回答 15

    浮动和定位都可以使元素脱离标准文档流,提升层级,  浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容...

  • 回答 7

    绝对定位就是你的位置已经不属于你了,你只能漂浮在半空中。相对定位就是你的位置你还占用的,人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的,都找不到的话就以body窗口来定位。...

  • 回答 17

    定位:1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容

  • 回答 5

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...

  • 回答 7

    引言:这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。一、何为BFC       BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的...

  • 回答 8

    同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]

  • 回答 9

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...

  • 回答 12

    BFC 是 Block Formatting Context(块级格式化上下文)的缩写,它是为了解决如下问题:浮动定位外边距合并清除浮动自适应多栏布局

  • 回答 9

    一、何为BFC       BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件      1、浮动元素,float 除 none 以外的值;       2、定位元素,p...

  • 回答 12

    css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear,官方定义如下: 语法: clear : none | left | right | both 取值: none : 默认值。

  • 回答 11

    float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边...

  • 回答 6

    1、 元素类型的转换(display属性)Display属性属性值:BlockInlineNone大部分块状元素默认的display的值为block,其中li默认的值 list-item(列表元素)大部分内联元素默认的display值为inline,其中input默认的值为:inline-block;(行内块元素);内联元素...

没有解决我的问题,去提问