关于浮动的一些注意事项
Posted liuxu24
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于浮动的一些注意事项相关的知识,希望对你有一定的参考价值。
关于浮动:
宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个“流”,必须从上而下,像“织毛衣”。而设计软件,想往哪里画个东西,都能画。
行内元素和块级元素的区别:(非常重要)
行内元素:
- 与其他行内元素并排;
- 不能设置宽、高。默认的宽度,就是文字的宽度。
块级元素:
- 霸占一行,不能与其他任何元素并列;
- 能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%。
块级元素可以转换为行内元素:
一旦,给一个块级元素(比如div)设置:
display: inline;
行内元素转换为块级元素:
同样的道理,一旦给一个行内元素(比如span)设置:
display: block;
那么,这个标签将立即变为块级元素,此时它和一个div无异。block”是“块”的意思。也就是说:
- 此时这个span能够设置宽度、高度
- 此时这个span必须霸占一行了,别人无法和他并排
- 如果不设置宽度,将撑满父亲
元素怎样浮动:
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边:
实例:img { float:right; }
给新手的建议:
我们在初期一定要遵循一个原则:永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动。
清除浮动的几种方法:
1.在最后一个子元素增加空div设置clear:both
2.增加伪类元素:after {
clear:both; content:""; display:block;
}
实例:.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
3.给父级元素设置合理高度。
4.给父元素加overflow:hidden(不建议使用,会隐藏溢出的部分)。
补充:
上图中,一个span标签不需要转成块级元素,就能够设置宽度、高度了。所以能够证明一件事儿,就是所有标签已经不区分行内、块了。也就是说,一旦一个元素浮动了,那么,将能够并排了,并且能够设置宽高了。无论它原来是个div还是个span。
以上是关于关于浮动的一些注意事项的主要内容,如果未能解决你的问题,请参考以下文章
浮动操作按钮 onClick 上的 viewPagerAdapter 片段 NullPointerException