首页 > Web开发 > 详细

css浮动float属性

时间:2020-02-24 00:13:59      阅读:88      评论:0      收藏:0      [点我收藏+]

css浮动float属性
float属性在开发中经常被应用于页面布局,在页面中元素设置了float属性会根据它的属性值来进行向左或向右浮动。
一. 页面中float布局展示
设置一个基本的一个布局,如下:

<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
.box{
width: 600px;
height: 350px;
background: #00FFFF;
overflow: hidden;/* BFC规范 */
}
.div1{
width: 80px;
height: 100px;
background: #ADFF2F;
margin: 10px;
}
.div2{
width: 100px;
height: 80px;
background: #800080;
margin: 10px;
}
.div3{
width: 120px;
height: 100px;
background: #FF0000;
margin: 10px;
}

效果如下,在css中div为块级元素所以独占一行,根据标准流所以是自上而下排列。

技术分享图片

当给页面中的块级元素(div1)加上**float:left;**属性,就会使块级元素进行浮动从而脱离标准流,效果如下:

技术分享图片

由此看出:设置了浮动属性的元素在原本的位置上浮动到上层,和原本的元素不在不一个层次上,其次它去除了原本文档流中自身的位置,使得下面2个元素向上移动占据的该元素的位置。

二.float的特性

  • 包裹性
  • 破坏性

包裹性:
在浮动元素不定义宽度的情况下,浮动元素的宽高由内容撑开。

破坏性:
当给元素增加浮动属性流式性。所谓流式性,就是当块级元素没有设置宽度的时候,他会自动的设置成和父元素相同的宽度!而当元素一旦设置成了float之后,会破坏这种特性,在父元素没有指定高度时,子元素全部浮动,父元素的高度就会没有,从而必须设定一个宽度,将元素撑起来。
————————————————
版权声明:本文为CSDN博主「Usur_张超」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/shelley22/article/details/104461038

css浮动float属性

原文:https://www.cnblogs.com/Usur-zc/p/12355168.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!