css浮动float属性

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