CSS实现元素浮动和清除浮动的方法CSS 清除浮动与BFC的方法css overflow: hidden 的用法(溢出隐藏及清除浮动)Css实现清除浮动的方法汇总什么是BFC？ CSS 使用伪元素清除浮动的方法轻松搞懂CSS浮动与清除浮动图文详解css 如何清除浮动的示例代码CSS清楚浮动clear:both的实例代码

浮动基本介绍

• 在标准文档流中元素分为2种，块级元素和行内元素，如果想让一些元素既要有块级元素的特点也同时保留行内元素特点，只能让这些元素脱离标准文档流即可。
• 浮动可以让元素脱离标准文档流，可以实现让多个元素排在同一行，并且可以设置宽高度。
• 其实浮动是通过float属性来实现的。
• float属性值说明表：    

右浮动实践

• 让我们进入右浮动的实践，实践内容如：将class属性值为.box1元素设置为右浮动。
• 在进入有浮动实践之前我们先看看要浮动元素结构是什么。

代码块

结果图

为什么结果图是一条边框线呢？因为在div标签中还没有内容呢，现在我们将子div标签设置宽高度为100px像素并且添加背景颜色。

代码块

结果图

• 为什么会排列为3行呢，因为3个div标签都是块级元素。
• 现在我们将class属性值为.box1的元素设置为右浮动。

代码块

结果图

注意：现在我们发现calss属性值为.box元素高度变矮了，这就说明了（浮动元素它已经脱离了标准文档流，不再占用空间了）、并且向右浮动，浮动到自身的父元素的边缘位置就停止了浮动。

左浮动实践

让我们进入左浮动的实践，实践内容如：将class属性值为.box1元素设置为左浮动。

代码块

结果图

• 我们先理解浮动的原理之后再解释下class属性值为.box2元素看不见的原因。
• 现在笔者给大家看2张实践结果图如：

结果图A

结果图B

• 通过这2张结果图我们可以把浮动简单的理解为“漂”举例：
• 假设class属性值为.box是一个池塘，3个子元素都是能够漂浮在池塘水面上的东西，现在我们将calss属性值为.box1元素浮动起来，漂在池塘水面上，是不是就不再占用池塘内的空间了。
• 既然我们理解为“漂”它一定是漂浮在池塘水面之上，但是没有浮动的元素在池塘水面之内，所以class属性值为.box2元素看不见，并不代表它不存在只是被class属性值为.box1元素给遮挡住了，现在我们将class属性值为.box2元素宽度设置为150px像素。

代码块

结果图

注意：事实证明class属性值为.box2元素是存在的。

下面我们将calss属性值为.box2元素设置为左浮动看看有什么不一样的效果

代码块

结果图

• 但是class属性值为.box2的元素左浮动并没有左浮动到本身父元素的边缘位置，为什么在class属性值为.box1后面呢？因为父元素已经有了浮动的子元素后面的子元素在浮动就浮动到前面浮动的元素之后。
• 现在我们将class属性值为.box3的元素设置为左浮动，看看有什么不一样的效果。

代码块

结果图

注意：浮动元素浮动以后，其父元素不再将浮动的子元素包裹在父元素之内，所以结果图出现一条黑色的边框线，若有不明白的看第一个实践内容。

将行内元素设置浮动

• 如果我们给行内元素设置了浮动，行内元素就拥有了块级元素的特点。
• 让我们进入行内元素设置浮动实践，实践内容如：将div标签中的span标签设置为左浮动。
• 在设置左浮动之前我们先看看给span标签设置宽高度和背景颜色有什么效果。

代码块

微笑是最初的信仰1微笑是最初的信仰2微笑是最初的信仰3

结果图

• 现在发现我们给span标签设置了宽高度为100px像素并没有生效，因为现在span标签还是行内元素。
• 现在我们给span标签设置左浮动，然后我们在看看效果如何。

代码块

微笑是最初的信仰1微笑是最初的信仰2微笑是最初的信仰

结果图

注意：行内元素设置为浮动之后就拥有了块级元素的特点。

设置浮动总结

• 浮动的特点如：
• 浮动元素脱离了标准的文档流，不再占用父元素的任何空间。
• 浮动元素比标准文档流的元素层级要高，会将标准文档流的元素遮挡住。
• 浮动元素会向左浮动或向右浮动。浮动元素会遇

  提示： 本文由神整理自网络，如有侵权请联系本站删除！
  本站声明：
  1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
  2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

  上一篇：CSS flex-basis 文本溢出问题的解决css多行文本溢出时出现省略号的示例纯CSS定制文本省略的方法大全CSS实现单行、多行文本溢出显示省略号的实现方法css实现文本溢出显示省略号CSS实现限制字数功能当对象内文本溢出时显示省略标记用css截取字符实现文字自动截断隐藏溢出文本css实现li中文本超出行宽自动隐藏兼容IE和FF的单行溢出文本显示省略号-CSS教程-网页制作-网页教学网

  下一篇：深度理解CSS clear:both的使用CSS——float属性及Clear:both备忘笔记清除浮动clear:both的应用详解-CSS教程-网页制作-网页教学网