浮动以及怎样围住浮动元素

浮动,float

意思就是把元素从常规文档流中拿出来。
浮动元素脱离了常规文档流之后,原来紧跟其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐。
如果浮动元素后面有两个段落,而你只想让第一段与浮动元素并列(就算旁边还能 放下第二段,也不想让它上来),怎么办?用 clear 属性来“清除”第二段,然后它 就乖乖地呆在浮动元素下面了。
clear:left
clear:right
clear:both
浮动元素位于“文档流外 部”,因而它已经不被包含在标记中的父元素之内了。正因为如此,它对布局可能产 生破坏性影响。

方法一,为父元素添加overflow:hidden

这个方法很简单,缺点是不太直观,即为父元素应用overflow:hidden,以强制它 包围浮动元素。
实际上,overflow:hidden声明的真正用途是防止包含元素被超大内容撑大。应用 overflow:hidden之后,包含元素依然保持其设定的宽度,而超大的子内容则会被容 器剪切掉。除此之外,overflow:hidden还有另一个作用,即它能可靠地迫使父元素 包含其浮动的子元素。

方法二,同时浮动父元素

父元素包围其浮动子元素,同时让父元素浮动起来。

方法三,添加非浮动的清除元素

强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元素——以及前面的浮动元素。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,845评论 1 92
  • 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素的特征:CSS设计flo...
    饥人谷_邵征鹏阅读 591评论 0 0
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 1,257评论 0 6
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 810评论 0 0
  • 借用老乡一张图 最后一段,经历过才会明白,一段友情,在你的人生中存在了十几年,我以为它会永远跟随我下去,...
    夜幕下的黑阅读 166评论 0 0