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

float(浮动)的属性和使用方法

时间:2017-12-04 22:17:39      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:hidden   自动   宽度   方法   宽高   bsp   order   没有   实例   

 1float浮动的属性值

  •   left:向左浮动
  •   right:向右浮动

 2、当父元素未浮动,子元素浮动时,就会造成浮动塌陷

实例:

父元素:

1 #mainDiv{
2 border: 5px solid red;
3 width: 1349px;
4 height: 800px;
5 
6 }

 

子元素:

1 div {
2 width: 300px;
3 height: 400px;
4 float: left;
5 }

 


 3、浮动的影响

  • 在允许的空间并排显示,如果空间不够,会自动换行
  • 改变块级元素占据一整行的特性,去掉多余的空间,把宽度缩成本身的内容的宽度或者设置的宽度
  • 浮动会脱离正常的文档流
  • 辅导会造成塌陷
  • 内嵌元素浮动后将可以设置宽高

 

 4、解决清除浮动me总结

  • 在不浮动的前一个标签属性中设置清除浮动,但是只针对同一父级元素中的内容
  • 借用一个块级元素单独设置clear:both
  • 在父元素中设置整体要浮动的高度和。
  • 让父元素与子元素一起浮动(不推荐)
  • 为父元素设置overflow:hidden
  • 为塌陷的父元素添加一个after属性,设置如下:

实例:

1  div:after{
2 clear:both;
3 content:""; ////是没有内容的,content里面是可以设置内容,实际是不存的
4 height:0;
5 width:0;
6 wisibility:hidden;
7 }

 

float(浮动)的属性和使用方法

标签:hidden   自动   宽度   方法   宽高   bsp   order   没有   实例   

原文地址:http://www.cnblogs.com/hlrblog/p/7979101.html

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