本文介绍了浮动元素如何影响文档流，以及如何通过clear属性清除浮动影响。同时，文章详细讨论了高度塌陷问题，解释了什么是BFC（Block Formatting Context），并列举了开启BFC的多种方式，推荐使用设置overflow为hidden来解决高度塌陷问题。
<title>名人名言</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a {
text-decoration: none;
}
.wk{
/* background-color: antiquewhite; */
/* border-bottom: 1px solid ; */
width: 1000px;
margin: 0 auto;
}
.tb1{
font-style: italic;
color: #707883;
}
.tb{
line-height: 2;
margin-left: 10px;
/* border-bottom: 1px solid ; */
}
li{
padding: 10px;
border: 1px solid;
float: left;
color: #707883;
margin-top:30px ;
}
.st{
float: left;
width: 1000px;
border-top: 1px solid #707883;
border-bottom:1px solid #707883; ;
/* margin-top: 84px; */
margin:-1px -100px;
padding: 20px 100px;
}
.sz-t{
width: 600px;
margin-top: 20px;
border: 1px solid;
padding: 10px;
line-height: 1.5;
}
.sz-s{
width: 600px;
line-height: 1.5;
margin-top: 10px;
}
.z1{
font-weight: 900;
}
.z2{
color: #707883;
margin-top: 10px;
}
.z3{
color: #707883;
}
.sz-j{
font-size: 20px;
border: 1px solid #707883;
/* margin: 20px; */
padding: 10px;
width: 600px;
}
.sz-k{
width: 600px;
line-height: 1.5;
margin-top: 10px;
}
.sz-k1{
font-weight: 900;
}
.sz-k2{
color: #707883;
margin-top: 10px;
}
.db{
width: 600px;
border: 1px solid #707883;
padding: 10px;
}
.db1{
line-height: 2.5;
font-style: italic;
color: #707883;
}
.sy{
float: left;
width: 300px;
border: 1px solid #707883;
margin: -755px 680px;
padding: 30px 30px ;
}
.sy-1{
line-height: 2.5;
font-style: italic;
color: #707883;
}
.sy-2{
border: 1px solid #707883;
width: 200px;
margin-top: 10px;
}
.sy-3{
padding-top: 10px;
font-style: italic;
}
.sy-4{
padding-top : 10px;
line-height: 2;
font-style: italic;
color: #707883;
}
a{
color: black;
}
a:hover{
color: red;
}
.a1{
float: left;
margin-left: 300px;
padding: 10px;
color: #707883;
}
</style><div class="wk">
<div class="tb">
<h1>名人名言</h1>
<p class="tb1">分享名人名言，开始一段触动心灵的智慧之旅跳到内容 </p>
<ul>
<li><a href="">登录</a></li>
<li><a href="">关于</a></li>
<li><a href="">名人名言</a></li>
<li><a href="">英文名言(English)</a></li>
<li><a href="">心理杂志</a></li>
<li><a href="">心理书籍</a></li>
<li><a href="">专题活动</a></li>
<li><a href="">发表</a></li>
</ul>
</div>
<div class="st">
<div class="sz">
<div class="sz-t">
<h3>心理学经典名言的智慧</h3>
<span>洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越
时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</span>
</div>
<div class="sz-s">
<p class="z1">
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。
所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。
</p>
<p class="z2">
创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。
所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。
</p>
<p class="z3">发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</p>
</div>
<div class="sz-j">
<p><a href="">作者简介</a></p>
</div>
<div class="sz-k">
<p class="sz-k1">
如果你还没有注意到你有能力让对方作出你所希望得到的反应，
那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。
如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如
果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。
人们会按照你对待他们的方式对待你。这其中没有什么秘诀。
看看周围的人，你可以在与下一个人交流时证实这一点。
</p>
<p class="sz-k2">
如果你还没有注意到你有能力让对方作出你所希望得到的反应，
那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。
如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如
果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。
人们会按照你对待他们的方式对待你。这其中没有什么秘诀。
看看周围的人，你可以在与下一个人交流时证实这一点。
</p>
<p class="z3">发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论
</p>
</div>
</div>
<div class="db">
<p class="db1">赞助广告</p>
<img src="./ad_2.jpg" alt="" width="570px">
</div>
<div class="sy">
<p class="sy-1">赞助广告</p>
<img src="./ad.jpg" alt="">
<p class="sy-3">搜索</p>
<p class="sy-2"><a href="">点击搜索</a></p>
<p class="sy-3">标签</p>
<p class="sy-4">60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物
卡斯特罗 卡斯特罗名言卡斯特罗语录 历史 友谊爱情 古代格言 名人名言
名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录 </p>
</div>
</div>
<div class="a1">
<p>©All Rights Reserved by Psytopic.来目Psytopic.com的礼物</p>
</div>
</div> clear可以用来清除其他浮动元素对当前元素的影响
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变
脱离文档流的特点
块元素：
1:块元素不再独占页面的一行
2:块元素的宽高被内容撑开
行内元素：
1:浮动过后的行内元素更像行内块元素,因问一行可以显示多个，并且默认宽度为内容的宽度
总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内,行内块元素
<!-- 1、什么高度塌陷
高度塌陷 一般情况下，父元素的高度都不会设置固定值，是由子元素自然撑开
若子元素设置脱离文档流后，就无法撑开父元素的高度，从而导致父元素的高度丢失
进而导致页面布局混乱，这就叫高度塌陷
2、解决高度塌陷方案
第一种方案
将父元素的高度设置固定值
不推荐使用
1、什么是BFC，如何开启BFC？
高度塌陷解决方案二：
页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC
当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素
BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。
开启BFC后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠 （解决父子外边距重叠的问题）
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素（可解决高度塌陷）
如何开启元素的BFC
1.设置元素浮动（不推荐）
- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素为inline-block（不推荐）
- 可以解决问题，但是会导致父元素宽度丢失，而且也会出现三像素的空白，
所以不推荐使用这种方式
3.将元素的overflow设置为一个非visible的值
此种方式，副作用较小，推荐使用
4.设置元素绝对定位
元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移，不能解决问题
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
