css - 浮动(float)

作者: 廖马儿 | 来源:发表于2017-12-24 22:08 被阅读1次

Test10
清除浮动的几个主要方法
一篇文章带你了解CSS clear both清除浮动
Css中的float和BFC（Block Formatting
CSS Float (浮动)
CSS的浮动属性
css float浮动
css浮动float
css - 浮动(float)
CSS：浮动（float）

在网页开发过程中，为了让块元素能在统一行上面显示，可以使用inline-block进行布局。还有没有其他的方式呢？我们今天学习浮动也可以达到这种效果。

float/文档流：

float:left | right | none | inherit;

文档流：是文档中可显示对象在排列时所占用的位置。
浮动：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

clear:left | right | both | none | inherit;   # 元素的某个方向上不能有浮动元素
clear:both;  # 在左右两侧均不允许浮动元素

案例：

div {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}

浮动也能像inline-block一样在同一行显示，并且，没有inline-block的一个问题，就是换行符会被转换为间隙。
如果向右浮动的话，是代码中第一个div最先浮动到最右边，然后是第二个div浮动到最右的第二个。

浮动（float）的特征：

1.多个块可以在一排显示
2.内联元素支持宽高
3.默认内容撑开宽度
4.脱离文档流
5.提升层级半层

1，2，3三条和inline-block一致。

清除浮动的方法

1.父级加高度（问题：扩展性不好）
2.父级也加浮动（问题：页面中所有的元素都加浮动，margin左右自动失效）
3.inline-block清除浮动的方法（问题：margin左右auto失效）
4.空标签清除浮动（问题：IE6最小高度19px。解决后IE6下还有2px偏差）
5.<br clear="all">清除浮动（问题：不符合工作中，结构，样式，行为，三者分离的要求。也就是说这样的话样式在结构中了）
6.after伪类清除浮动（现在主流方式）
7.overflow：hidden 清除浮动（问题：需要配合宽度或者zoom 兼容ie6，ie7）
overflow：scroll | auto | hidden ， overflow：hidden；溢出隐藏（裁刀！）

空标签清除浮动方式：

.clearfix {
    clear: both;
}

...
<div class="box">
    <div class="item">
    </div>
    <div class="clearfix"></div>
</div>

after伪类清除浮动：

.clearfix:after{   # 注意：伪类的冒号后面不能有空格
    content: "";
    display: block;
    clear: both;
}

.box {
    border: 1px solid red;
}
.item {
    width: 200px;
    height: 200px;
    background-color: #222222;
    float: left;
}


</style>

</head>

<body>

<div class="box clearfix">
    <div class="item"></div>
</div>