Css布局系列-float 浮动_html/css_WEB-ITnose
官方定义:
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
看着这一些定义似懂非懂,要是真在使用的时候,还是有一些不懂的地方。现对其官方定义进行归纳总结一下他的特点:
补充说明:普通流(也称标准流)规定元素是从左到右、从上到下顺序排列。
下面我们通过实例来逐一进行验证,当然不排除在某种特殊的情况下我的归纳总结不成立,不过我是没有想出来的。
- 这个就不浪费时间;
- 将div1设为向左浮动,你可以看到他与div2元素重叠,且div1在最顶层,并且也验证没有占用任何空间了,与元素设为绝对定位和z-index 效果是一样,但是要不尽完全相同,你可以看到div2文字要没有被覆盖住。真是一个让人捉摸不透浮动啊!
3. 将div1的高宽度去掉,他就会根据你的文字宽度自撑了,如果不给高宽度能有多窄就有多窄,其实与元素设为inner-block且不设定高宽度效果一样都是自撑,后续还会介绍该属性。在某种意义上来讲设置元素浮动与行内块是一个道理,只不过浮动是可以改变元素方向而已。
4. 设置div1 div2 两个元素向左浮动,根据我归纳总结的,如果浮动元素碰到父级元素的边框或碰到另一个浮动元素边框停止浮动。div1就是碰到父级元素容器的边框 、div2就是碰到div1的边框停止浮动,如果猜想有问题,应该是div2元素是要覆盖div1的元素,可是没有,证明我归纳是正确的。
5. 设置div1 元素向左浮动,根据我归纳总结的,如果指定浮动元素后,后续非浮动块级元素会紧跟着浮动元素后面,并会自动填充元素的宽度。其实div2的宽度是100%了,div1是浮动在div2元素上面的。上面说过浮动元素是不占文档任何空间的。
上一篇: 【Oracle入门系列】第02章
推荐阅读
-
Css布局系列-float 浮动_html/css_WEB-ITnose
-
css3 +html5+js 手机网页布局问题(在微信上使用).两个问题_html/css_WEB-ITnose
-
web前端入门之html+css实例④之浮动(float与inline-block)
-
【译】利用 :placeholder-shown 选择器实现 label 浮动效果_html/css_WEB-ITnose
-
div+css页面布局_html/css_WEB-ITnose
-
网页布局知识--目录篇_html/css_WEB-ITnose
-
CSS等高布局的6种方式_html/css_WEB-ITnose
-
CSS3 中弹性盒布局_html/css_WEB-ITnose
-
CSS 魔法系列:纯 CSS 绘制三角形(各种角度)_html/css_WEB-ITnose
-
css之浮动布局float