`
a19905522
  • 浏览: 95243 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

overflow解决float浮动后高度自适应问题

 
阅读更多 

也许你在做网页的时候发现，发一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。
如图中的城市导航内的城市列表中采用了float之后，那个外框的高度并不是内容元素的高度：


怎么解决这个问题呢？经发现可以采用overflow来解决！方法是在父元素加上如下代码即可

overflow:auto; zoom:1;
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。
 
分享到：
| PHP远程重启服务器代码
评论
1 楼 blackey629 2012-07-23  
perfect，楼主帮我解决了大问题！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    微信小程序完美解决scroll-view高度自适应问题的方法

    第二种情况，scroll-view自适应页面剩余高度 xml文件 <view class=box-head></view> <scroll class=box-scroll></scroll> wxss文件 .box { display: flex; flex-direction:column; height:100vh; ...

    子元素div高度不确定时父div高度如何自适应

    在最外层div加以下样式 height:100%; overflow:hidden;...我们可以通过三种方法来解决这个问题　1增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 复制代码代码如下: <div id=”m

    css textarea 高度自适应,无滚动条

    随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单,就是一段css:overflow-y:visible </textarea> 首先，原则上实现textarea自适应必须适用css，不能直接适用“width＝...

    详解overflow-scrolling解决滚动卡顿问题

    以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;，是因为这行代码启用了硬件加速特性，所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题。 -webkit-overflow-...

    浅析两列自适应布局的3种思路

    前面已经介绍过单列定宽...而float和overflow配合可实现两列自适应效果。使用overflow属性来触发bfc，来阻止浮动造成的文字环绕效果。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:

    什么是高度塌陷 以及高度塌陷的解决办法

    当父元素高度自适应，子元素浮动后，造成父元素高度为0，称为高度塌陷。 高度塌陷怎么解决？ 方法一：给父元素一个固定的高度 缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。 方法二：给父...

    详解CSS中zoom属性或overflow:auto属性清除浮动的作用

    因为Zoom属性是IE浏览器的专有属性，所以他清除浮动作用只适用于IE浏览器，而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用...

    详解为什么设置overflow为hidden可以清除浮动带来的影响

    使用浮动的确能够解决一些布局问题，但是也带了一些副作用影响，比如，父元素高度塌陷，我们有好几种可以清除浮动的方法，最常用的就是设置父元素的overflow:hidden这个属性，每次在写代码的时候总是这样写，但是，...

    清除浮动(float)的影响介绍

    为甚么，父元素overflow：hidden会解决塌陷问题？ 来自知乎貘吃馍香的回答 overflow:hidden 的意思是超出的部分要裁切隐藏掉 那么如果 float 的元素不占普通流位置 普通流的包含块要根据内容高度裁切隐藏 如果高度是...

    相邻div实现一个跟着另一个自适应高度示例代码

    复制代码代码如下: <!... <head> <title>new document</title>...style type=”text/css”&... } .wrap .left{ float:left; width:50%; background:#eee; padding-bottom:3000px; margin-bottom:-3000p

    解决页面使用overflow: scroll在iOS上滑动卡顿的问题1

    故事背景：最近的一次开发中，使用到了overflow：scroll属性来滑信心满满的以为不会出现任何问题，看来还是太清高自傲了，于是写下这篇随笔特此总结一番。机

    FF下文本溢出的text-overflow完美解决方方案

    这是经过笔者亲测的ff下的text-overflow的完美解决办法，希望可以给正在为此发愁的你带去一点点的希望，

    CSS清除浮动float的三种方法小结

    一、浮动的定义 使元素脱离文档流，按照指定方向...使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。 三、浮动用法 分析HTML结构： <div class=box>

    BFC实现自适应两栏布局

    在解决高度塌陷的问题的时候，通过BFC的触发条件之一触发BFC后，在计算BFC的高度的时候，浮动元素就可以参与计算了。 BFC(Block Formatting Contexts)即块级格式化上下文，首先得是块元素，其次具备触发条件之一的才...

    CSS实现两栏布局，左边固定，右边自适应的4种方法

    1. float+overflow:hidden 这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码...

    jquery实现文本框textarea自适应高度

    浏览器中默认的文本框是不能根据内容的增多变高，只能固定高度有滚动条，体验不是很好，找了很多方法兼容都不行，总算找到个兼容良好的方法： <body> <textarea id="textarea3" style="overflow-y:...

    使用CSS的overflow属性防止float撑开div的方法

    许多应征前端工程师的人，在面试时都会被问到这类float的问题。例如：div元素内的两个子元素p都float:left，外面的div会变成没有高度，此时该怎么办呢？通常解法是在排版流里面的元素加一个after的伪元素，将它设成...

    标签增加CSS的overflow属性来清除浮动

    个方法不单使用简单，而且FF、OP、IE7都支持，从此可以...方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{

    父级元素未设置高度和宽度时高度塌陷问题的解决方法

    解决“高度塌陷”的问题很简单： 1.浮动父级元素 如果让父级元素浮动，父级元素的高度就会扩大，直到完全包含它里面的浮动元素，虽然这个方法很奇怪，但是很有效。如果选择这种方法，一定要在该元素的下个元素添加...

Magicbox
Global site tag (gtag.js) - Google Analytics