css property float float

css properties float float
float property is often applied in the development of the page layout, the page is provided a float element property based on its attribute values to the right or left floating.
A float page layout display
to set up a basic layout, as follows:

<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;
}

Results are as follows, in the block-level element div css is therefore a separate line, from top to bottom flow is so arranged according to the standard.

When a page block-level elements (DIV1) plus ** float: left; ** properties, will cause the floating block-level elements thereby departing from the standard flow effect is as follows:

This shows that: the floating properties are provided to the upper floating elements, and elements of the original is not on a level not in the original position, followed by its addition to the original document to its flow position, so that the upward movement of the following two elements occupy the position of the element.

Characteristics of the two .float

Encapsulated
Destructive

Encapsulated:
in the case where the width of the floating elements are not defined, the width and height of the floating element by the content distraction.

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

css property float float

Guess you like