layout: "css" title: "daily-summary" date: "2020-06-05 18:00"
为什么需要浮动
像word一样有图片环绕,图片嵌入等功能
出现问题
- 子元素设置了float属性，但父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)
什么意思
- 因为给子元素设置了
float属性之后,子元素已经脱离了标准的文档流,什么意思呢,就是它不再按照文档流的意思来,该行内元素的用行内元素的规则处理,该块元素的用块元素的规则,而是会占有父元素的位置(如果父元素没有指定宽高)
jsfiddle尝试
- 可以复制下面的代码到jsfiddle中实时查看效果
/* html */
<div class="inner-div">
<div class="float-div">float left</div>
<div class="no-folat-div">purple color purple color purple color purple color purple color purple color purple color purple color </div>
</div>
<div class="outer-div">black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color</div>
/* css */
.inner-div {
width: 500px;
border: 2px solid black;
}
.float-div {
width: 100px;
height: 100px;
border: 2px dashed red;
color: red;
margin: 4px;
float: left;
}
.no-folat-div {
color: blue;
border: 2px solid blue;
}
.outer-div {
width: 500px;
height: 100px;
margin: 5px 0;
border: 2px dotted black;
}
上面的我们只需要第一段文字环绕就可以了,但是不需要下面的文字也进行环绕,怎么办呢,这里就是浮动的清除了.
浮动的清除
- 方案1
- 谁不需要浮动,给谁清除浮动
.no-float-div {
color: blue;
border: 2px solid blue;
clear: left;
/* 哪边不需要浮动就清除哪边,两边都不需要的话就是 both 属性 */
}
- 方案2
- 父元素结束标签之前插入清除浮动的块级元素
/* html */
<div class="inner-div">
<div class="float-div">float left</div>
<div class="no-folat-div">purple color purple color purple color purple color purple color purple color purple color purple color </div>
<div class="blank-div"></div>
</div>
<div class="outer-div">black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color</div>
/* 主要添加了这一段css样式 */
.blank-div {
clear: both; // or left
}
/* 注意新加的标签必须要是 块元素,否则无法撑起来父级元素的高度,你可以把div换成span试试 */
- 方案3
- 使用为元素代替新增的标签,让html结构更加简单清晰
/* html */
<div class="inner-div clearfix">
<div class="float-div">float left</div>
<div class="no-folat-div">purple color purple color purple color purple color purple color purple color purple color purple color </div>
/* <div class="blank-div"></div> */
</div>
<div class="outer-div">black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color black color</div>
.clearfix:after {
content: '';
/* height: 0; */
/* display: block; */
display: table;
clear: both;
}
/* 只要 display 满足是 块级元素 即可 */
