float（浮动）的属性和使用方法

2024-08-26 06:39:30

1float浮动的属性值

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

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

实例：

父元素：

 #mainDiv{

 border: 5px solid red;

 width: 1349px;

 height: 800px;

 }

子元素：

 div {

 width: 300px;

 height: 400px;

 float: left;

 }

3、浮动的影响

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

4、解决清除浮动me总结

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

实例：

  div：after{

 clear：both;

 content：""; ////是没有内容的，content里面是可以设置内容，实际是不存的

 height:;

 width:;

 wisibility:hidden;

 }

最新文章

热门文章