略说HTML5中的浮动float

CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态。本文将从最基本的知识开始说起,谈谈关于浮动的应用,出现的问题和解决方案。

  float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设置了float属性的元素为浮动元素。

float的详细细节

在说明float带来的详细细节之前,我们首先要了解一个概念。
包含块:浮动元素的包含块就是离浮动元素最近的块级祖先元素,前面叙述的例子中,div.box就是span元素的包含块。

了解完包含块的概念之后,首先要说明的浮动元素的第一个特性:不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列.

最后来总结一下浮动的特征吧
1.脱离文档流
2.不脱离父级
3.浮动元素对后续布局有影响,会浮动后续元素上,但不会覆盖其文本内容
4.浮动元素遇到父元素边界或者上一个浮动元素旁边即停止浮动
5.浮动之后的元素将会具有行内块元素的特征

如何清除浮动呢,下面提供三种方法
1.清除浮动只能用块元素,一般用div清除,清除浮动的div写在浮动元素后面
例如:<div class="clear"></div>
2.让父类元素跟着一起浮动,但不建议,因为影响布局
3.通过伪类选择器清除浮动,以下三种属性缺一不可
例如: id名/class名:after{
display:block;
content:"";
clear:both;
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,679评论 1 92
  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 4,756评论 0 3
  • 一、浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:1、浮动模型是一种可视化格式...
    青鸣阅读 4,773评论 0 0
  • 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移...
    郝特么冷阅读 4,262评论 0 6
  • 得得得
    97_a254阅读 1,183评论 0 0