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

Posted 蓝心高飛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了float(浮动)的属性和使用方法相关的知识,希望对你有一定的参考价值。

 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(浮动)的属性和使用方法的主要内容,如果未能解决你的问题,请参考以下文章

CSS里面 的float 属性 浮动 代表啥意思??

浮动( Floats )

float浮动和清除float浮动

浮动float

通俗易懂的CSS的浮动float详解

将float标签放在kendoReact DatePicker中