浮动相关问题

2019-07-14 admin

浮动相关问题:

使得父元素包含子元素,常见的方式是为父元素设置overflow:hidden或浮动父元素。根本原因在于创建BFC的元素,子浮动元素也会参与其高度计算,即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可,并不只有这两种方式。

复制代码 <!DOCTYPE html> <html> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> <!–The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<meta name=“viewport” content=“initial-scale=1, maximum-scale=1,user-scalable=no”/> <title></title>

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
  padding:0;
}
.first{
  margin:20px;
  background:lightgreen;
  border: 2px solid lightgreen;
  /*display:inline-block;*/
  /*overflow:hidden;*/
  /*float: left;*/
  /*position: absolute;*/
}
ul{
  overflow:hidden;
  margin:10px;
  background:lightblue;
  width:100px;
  height:200px;
  float: left;
}
li{
  margin:25px;
}

</style>

</head>

<body class=“claro”> <div class=“first”>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

</div>

</body>

</html> 复制代码

将上例中first中任意一项注释去掉都可以得到包围浮动的效果,其中overflow:hidden方式,与正常流最接近。

关于清除浮动更详尽的方式,请大家参考这篇文章此处,dolphinX道友的博客简洁明了。

多栏布局的一种方式

上文提到的一条规则:与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式。

多栏布局 这种布局的特点在于左右两栏宽度固定,中间栏可以根据浏览器宽度自适应。

IE中也有与BFC类似的概念成为hasLayout,我平时工作最低也是使用IE8,并没有涉及到这部分所以还请道友们查询其他资料。

总结

在我第一次接触到BFC时经常有一个疑问,BFC的结构是什么样的,像DOM一样的树状结构,还是一个BFC集合。其实我们不需要关心BFC的具体结构,这要看浏览器的具体实现采用什么样的数据结构。对于BFC我们只需要知道使用一定的CSS声明可以生成BFC,浏览器对生成的BFC有一系列的渲染规则,利用这些渲染规则可以达到一定的布局效果,为了达到特定的布局效果我们让元素生成BFC。

对于CSS新手来说不建议涉猎BFC,还是应该去看看相应的CSS布局规则,像《CSS设计指南》、《CSS权威指南》这两本都很不错,达到一定积累再来看BFC,说不定会有一种豁然开朗的感觉。BFC中几乎涉及到CSS布局的所有重要属性,这也是BFC的难点和我们需要掌握BFC的意义所在。

文章中的部分内容可能与道友看到的其他博客有所出入,毕竟每个人的工作经验、所遇问题跟测试方法不一样,差异在所难免,探讨技术的乐趣在于不断的总结积累与自我推翻,只要大方向正确细节问题可以慢慢探索。

参考文章

http://www.cnblogs.com/winter…

http://f2e-js.com/?p=2599

http://www.cnblogs.com/dolphi…

http://wenku.baidu.com/link?u…

http://reference.sitepoint.co…

http://www.yuiblog.com/blog/2…

http://www.cnblogs.com/winter…

[转载]原文链接:https://segmentfault.com/a/1190000019754348

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69685.html

文章标题:浮动相关问题

相关文章
JavaScript点击按钮后弹出透明浮动层的方法
本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法。分享给大家供大家参考。具体分析如下: 这里实现点击后页面变灰色,并用JS弹出一个居中的浮动层提示窗口,这个窗口是透明的,可以设置透明度,网上已经有很多类似的JavaScrip...
2017-03-23
JavaScript的jQuery库中function的存在和参数问题
jQuery function 参数传递 jQuery的function函数中使用外部变量: &#x2F;&#x2F;如何取得i的变量 for(i=0;i&lt;3;i++) { $.get(&quot;&#x2F;test.html&q...
2017-03-29
nodejs爬虫抓取数据乱码问题总结
一、非UTF-8页面处理. 1.背景 windows-1251编码 比如俄语网站:https://vk.com/cciinniikk 可耻地发现是这种编码 所有这里主要说的是 Windows-1251(cp1251)编码与utf-8编码的...
2017-03-26
javascript相关事件的几个概念
客户端javascript程序采用了异步事件驱动编程模型。 相关事件的几个概念: **事件类型(event type):**用来说明发生什么类型事件的字符串; **事件目标(event target):**发生事件的对象; **事件处理程序...
2017-03-23
JavaScript实现的圆形浮动标签云效果实例
本文实例讲述了JavaScript实现的圆形浮动标签云效果。分享给大家供大家参考。具体如下: 这里介绍的JS标签云效果,在鼠标的作用下会自动转动,整体上围绕成一个圆形,各个标签之间无需Div代码,直接文字+链接的形式,有多少就显示多少,Ja...
2017-03-27
javascript解决IE6下hover问题的方法
有时候我们想在非a标签上加hover元素 但是我们都知道IE6下不支持XX:hover,所以我们现在可以用js实现掉:代码如下 &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x...
2017-03-27
vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三方样式变小的问题
最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬) 我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案: 这里就不细说了 有大神总结 ,或者自行百度。 ...
2018-04-25
kindeditor修复会替换script内容的问题
kindeditor一些个人修改 1.替换script里面的内容的问题 2.颜色选择器扩展,复制的fck编辑器选颜色 3.swfupload.swf上传前图片预览功能 kindeditor.js function _formatHtml(h...
2017-03-22
浅谈js 闭包引起的内存泄露问题
在js闭包中,可以定义“局部变量”,但是外部去调用的话,尤其是反复调用赋值,会造成内存的大量开销。如何防止这种现象的发生?关于闭包还有没有类似的内存或效率问题需要注意?如何去规避? 内存问题可能是如下原因造成: 1. 循环引用导致了内存泄漏...
2017-03-24
vue 解决addRoutes动态添加路由后,刷新失效问题
你是电,你是光,你是最美的太阳🌞 前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正。 **应用场...
2018-06-30
回到顶部