关于浮动的一些注意事项

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

关于清除浮动与闭合浮动

如何在单个活动中使用片段中的主要活动浮动操作按钮?

关于清除浮动的方法

关于片段生命周期,何时调用片段的 onActivityResult?

关于片段生命周期