2 j550341130 j550341130 于 2016.09.09 16:27 提问

求教css中关于float浮动的问题

图片说明
图片说明

这是为啥?

4个回答

j550341130
j550341130   2016.09.09 17:05
已采纳

明白了, 栏目1加上 float 后, 它是飘在栏目2上面的, 此时 栏目2 其实是占满整一行的;
如果设置宽度一样的话, 栏目2会被浮动起来的栏目1遮挡, 所以栏目2被挤到下方了.

wenzhu0_0
wenzhu0_0   2016.09.09 17:14

文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的
元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在它身下布局。
但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是没有拖出文本流。

建议你看一下文本流和文档流相关的东西

j550341130
j550341130 回复wenzhu0_0: 嗯嗯, 多谢讲解~~
接近 2 年之前 回复
judas_jia
judas_jia 回复wenzhu0_0: 栏目2是div
接近 2 年之前 回复
wenzhu0_0
wenzhu0_0 楼主,我这个才是比较专业的回答,楼上只是说明了现象,没有说明本质
接近 2 年之前 回复
He_May
He_May   2016.09.16 17:01

其实都是文字环绕,只是由于第一个设置的两个div的宽度都为80px,第二个div只能撑大高度来适应第一个div。
如果也一样给第一个div设置宽度,且给第二个设置的宽度比第一个宽,就能明显的看出来了。
图片说明
图片说明

j550341130
j550341130 嗯嗯, 明白了, 多谢讲解
接近 2 年之前 回复
buquan4041
buquan4041   2016.11.02 00:31

这不就是盒子模型那里面的吗,float以后就和底层分开了。而且会盖住底层的部分

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
float浮动的原理和工作方式,以及浮动造成的问题总结
浮动float 浮动元素是脱离文档流的,不占据空间。 浮动元素碰到包含它的元素的边框或者其他浮动元素的边框会停留下来。   浮动元素会引起的问题: 1)父元素的高度无法撑开,影响与父元素的同级元素。 2)与浮动元素同级的非浮动元素(内联元素)会跟随其后。 3)若非第一个元素浮动,则该元素之前的元素也需要跟随其后,否则会影响页面的显示的结构。 清除浮动的几种方法: 1)”clear
CSS浮动Float——基础知识及兼容性问题
先说一下浮动的基本定义:浮动的框可以向左或向右移动,直到它的外边缘碰到父级边界或另一个浮动框的边框为止。由于浮动框不在文档流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。那么就要说一下文档流了,文档流是文档中可显示对象在排列时所占用的位置(可以认为各个元素原本默认的位置)。那我们在实际应用哪里会遇到这种问题呢。例如我们现在需要把几个块级元素放在一排,我们可以使用display:inlin
css样式float造成的浮动“塌陷”问题的解决办法
什么是CSS Float?定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级元素,而不论它本身是何种元素。元素对象设置了float属性之后,它将不再独自占据一行。浮动块可以向左或向右移动,直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。 fload属性有四个可用的值:Left 和Ri
关于CSS浮动float属性的了解及清除浮动的方式
声明:本文主要对一些文章关于float介绍自己的理解和整理,方便日后深入研究和使用,同时提供原文链接。 正文:1、浮动的本质: 挥刀自宫,破坏inline-box行内框元素特质(即破坏了高度),导致破坏自身模型(line-box线框模型),进而影响后面元素,实现文字环绕图片显示的效果和页面布局;但用浮动实现页面布局本不是浮动该干的事情。 解释线框模型--行内框(线框)元素
一天搞定CSS: 浮动(float)的副作用--12
一天搞定CSS: 浮动(float)的副作用--12
浮动布局float带来的高度塌陷——清除浮动
一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。 1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none;
float一点小疑问 浮动也会有层级?
无标题文档 body,div,a{ margin:0;padding:0; } /* 清理浮动 */ .fn-clear:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .fn-clear { zoom:1
一天搞定CSS: 浮动(float)及文档流--10
一天搞定CSS: 浮动(float)及文档流--10
[CSS]CSS浮动float详解(一):标准文档流
Web网页的制作,是一个流,必须自上而下依次进行。标准文档流流的比喻很形象,就像水流一样,必须从上而下,像织毛衣一样。 那么究竟什么是标准文档流呢?在web中,标准文档流有以下几个特点: 高矮不齐,底边对齐 自动换行 无论字体大小有多高,图片大小有多高,底边始终对齐,而且会自动换行。 空白折叠现象<p>我叫Feathers
CSS中浮动(Float)的作用
转自:http://www.missyuan.com/thread-438828-1-1.html 课程关键词:浮动 页面布局有两种方式 引用: 1)浮动Float  2)定位Position 今天就来一个小小的练习,让大家理解Float的含义