码迷,mamicode.com
首页 > 其他好文 > 详细

关于浮动的一些注意事项

时间:2018-11-03 11:25:23      阅读:448      评论:0      收藏:0      [点我收藏+]

标签:影响   设置   after   需要   行内元素   默认   溢出   意思   文字   

关于浮动:

  宏观地讲,我们的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。









关于浮动的一些注意事项

标签:影响   设置   after   需要   行内元素   默认   溢出   意思   文字   

原文地址:https://www.cnblogs.com/liuxu24/p/liuxu.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!