整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<img src="./w_1.jpg" alt="表情包" title="写信" />浮动：脱离文档流，父元素不计算它的高度，会导致塌陷，影响后边元素的布局。
.wrap {
border: 1px solid fuchsia;
}
.box {
width: 200px;
background: red;
float: left;
} <div class="wrap">
<div class="box">
我是爱美的姑娘，关注我，每天为您分享和复习前端开发的知识点以及常见的面试题、学习的同时还可以了解最新的娱乐八卦、幽默搞笑，学习更轻松哟
</div>
</div>如下图，父元素本来有一个边框的，但是由于子元素浮动了，它不会计算浮动元素的高度，就塌陷了。如果我们再继续写元素，布局就乱了，这时候就需要把这一块隔离开。不影响外边的元素，同时外边的元素也不能影响它，这时候就可以清除浮动来解决：
清除浮动的几种方式：
BFC的特点：
给父元素设置：
<style>
.wrap {
border: 1px solid fuchsia;
overflow: hidden;
}
.box {
width: 100px;
background: red;
float: left;
}
</style>
<body>
<div class="wrap">
<div class="box">
我是爱美的姑娘，关注我，每天为您分享和复习前端开发的知识点以及常见的面试题、学习的同时还可以了解最新的娱乐八卦、幽默搞笑，学习更轻松哟
</div>
</div>
</body>缺点： IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
<style>
.wrap {
border: 1px solid fuchsia;
overflow: hidden;
}
.box {
width: 100px;
background: red;
float: left;
}
.clear {
clear: both;
}
.box_2 {
width: 100px;
height: 100px;
background: darkblue;
}
</style>
<body>
<div class="wrap">
<div class="box">
我是爱美的姑娘，关注我，每天为您分享和复习前端开发的知识点以及常见的面试题、学习的同时还可以了解最新的娱乐八卦、幽默搞笑，学习更轻松哟
</div>
</div>
<div class="clear"></div>
<div class="box_2"></div>
</body>如下图：
缺点：会新增多余的空标签，后期维护麻烦
<style>
.wrap {
border: 1px solid fuchsia;
}
.box {
width: 100px;
background: red;
float: left;
}
.wrap::after {
content: '';
display: block;
clear: both;
}
.box_2 {
width: 100px;
height: 100px;
background: darkblue;
}
</style>
<body>
<div class="wrap">
<div class="box">
我是爱美的姑娘，关注我，每天为您分享和复习前端开发的知识点以及常见的面试题、学习的同时还可以了解最新的娱乐八卦、幽默搞笑，学习更轻松哟
</div>
</div>
<div class="box_2"></div>
</body>如下图：
缺点：用zoom:1触发hasLayout.
我是爱美的姑娘，关注我，每天为您分享和复习前端开发的知识点以及常见的面试题、学习的同时还可以了解最新的娱乐八卦、幽默搞笑，学习更轻松哟
例
使用 <summary> 元素：
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
浏览器支持
目前，只有 Chrome 和 Safari 6 支持 <summary> 标签。
标签定义及使用说明
<summary> 标签为 <details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。
HTML 4.01 与 HTML5之间的差异
<summary> 标签是 HTML5 中的新标签。
提示和注释
注释：<summary> 元素应该是 <details> 元素的第一个子元素。
全局属性
<summary> 标签支持 HTML 的全局属性。
事件属性
<summary> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
例
使用 <span> 元素对文本中的一部分进行着色：
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
浏览器支持
所有主流浏览器都支持 <span> 标签。
标签定义及使用说明
<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
提示和注释
提示：被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
HTML 4.01 与 HTML5之间的差异
NONE.
全局属性
<span> 标签支持 HTML 的全局属性。
事件属性
<span> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
