css定位元素--浮动与清除

清除浮动的行为是作用于** 浮动元素 的父元素或者是兄弟元素,而不是 浮动元素 **本身。

*** 三个方法: ***

--方法一:为父元素添加 overflow:hidden
--第一个方法很简单,缺点是不太直观,即为父元素应用 overflow:hidden,以强制它包围浮动元素。
--实际上, overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden 之后,包含元素依然保持其设定的宽度,而超大的子内容则会被容器剪切掉。除此之外, overflow:hidden 还有另一个作用,即它能可靠地迫使父元素包含其浮动的子元素。
--方法二:同时浮动父元素
--第二种促使父元素包围其浮动子元素的方法,是也让父元素浮动起来。
--方法三:添加非浮动的清除元素
--第三种强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元素——以及前面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种。

查看原文

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:浮动元素不在普通的文档流中...
    在乎者也阅读 4,948评论 0 1
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 何谓浮动元素?有什么特征?所谓浮动...
    草鞋弟阅读 4,229评论 0 1
  • 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移...
    郝特么冷阅读 4,276评论 0 6
  • 今天下午郁闷与纠结,用laravel5.1写了一个插件,本地测试成功,准备拉到服务器上溜溜。首先发现服务器php版...
    栗色贝雷帽阅读 3,573评论 0 0