`
hardcoder
  • 浏览: 61764 次
  • 来自: ...
最近访客 更多访客>>
社区版块
存档分类
最新评论

浮动盒子重叠问题

阅读更多
我想像两个盒子的文本也会完全重叠起来,可现实不是这样,为什么?请高手说明
FIREFOX查看
xml 代码
  1. <style>  
  2. .box   
  3.     {   
  4.         background:#3399FF;   
  5.         padding:10px;   
  6.         border:2px #FF6600 dashed;   
  7.         height:80px;   
  8.         width:80px;   
  9.     }   
  10. </style>  
  11. <div class="box" style="float:left">盒子1</div>  
  12. <div class="box">盒子2</div>  

 


答案

1、如果浮动元素在非浮动块元素之后,则浮动元素将会出现在非浮动块元素的下方;
2、如果浮动元素在非浮动块元素之前,则非浮动块元素内容将会显示浮动块元素行后。
3、在浮动元素之后的非浮动块元素会无视该浮动元素的存在,显示在与浮动元素开始的位置,浮动元素显示在非浮动块元素之上。

http://www.planabc.net/article.asp?id=120

分享到:
评论

相关推荐

    CSS面试须知盒子模型、浮动及定位.docx

    3. 浮动的盒子参照父盒子的对齐,不会与父盒子的边框重叠,也不会超过父盒子的内边距 4. 浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流 浮动的应用包括: 1. 让多个块级元素在一行显示 2. 让...

    CSS-day04.pptx

    浮动元素与父盒子的关系子盒子的浮动参照父盒子对齐不会与父盒子的边框重叠,也不会超过父盒子的内边距。 浮动元素与兄弟盒子的关系在一个父级盒子中,如果前一个兄弟盒子是浮动的,那么后一个兄弟盒子将会根据浮动...

    CSS中的盒子模型(图片)

    3. 盒子模型对元素布局的影响,例如元素重叠、浮动和定位等情况。 通过这三张图片,你可以更直观地掌握CSS盒子模型的工作原理,并运用到实际的网页设计中。实践中,结合代码调试和视觉效果预览,将更有利于深化理解...

    css1--关于float的div撑不起父div的问题

    如果不解决,可能导致父元素下面的内容与浮动元素重叠,引发布局混乱。 为了解决这个问题,有以下几种常见策略: 1. 清除浮动(Clear Float) 可以在父元素后面添加一个空元素,并设置`clear:both`或`clear:left/...

    前端大厂最新面试题-BFC.docx

    4. **不与浮动元素重叠**:BFC的区域不会与任何浮动元素的区域发生重叠。 5. **浮动子元素高度计算**:在计算BFC的高度时,浮动的子元素也会被纳入考虑范围。 BFC的触发条件有多种,包括但不限于: - **根元素**:...

    bfc的详细介绍以及大总结

    3. **防止外边距重叠**:通过创建BFC,可以有效地避免内部元素之间的外边距重叠问题。 4. **布局隔离**:对于一些复杂的布局需求,使用BFC可以有效地将不同的布局区域进行隔离,避免相互干扰。 #### 五、总结 通过...

    CSS深入学习之让你认识不一样的margin

    当元素设置为浮动时,由于它不再处于正常的文档流中,因此通常不会引起margin重叠问题。但是,为了处理浮动元素引起的布局问题,通常需要清除浮动。文章最后给出了一种利用CSS伪类清除浮动的bootstrap方式。 整体来...

    CSS布局之盒子模型属性.docx

    `margin`的重叠现象主要发生在垂直方向相邻的块级元素之间,不包括浮动、绝对定位或行内块元素。此外,`margin`还可以通过`auto`设置,实现水平居中,但不能用于垂直居中的布局,因为元素的高度默认由内容决定,与父...

    前端面试秘籍.pdf

    清除浮动是指解决浮动元素父元素高度塌陷的问题。方法有: * clear 清除浮动(添加空 div 法) * 给浮动元素父级设置高度 * 父级同时浮动(需要给父级同级元素添加浮动) * 父级设置成 inline-block,其 margin: 0 ...

    CSS-day05.pptx

    在使用定位布局时,可能会出现盒子重叠的情况。加了定位的盒子,默认后来者居上,后面的盒子会压住前面的盒子。应用z-index层叠等级属性可以调整盒子的堆叠顺序。 本资源为读者提供了一个系统的CSS定位知识点总结,...

    HTML与CSS面试题.docx

    2. Margin纵向重叠问题和解决方法: Margin纵向塌陷现象是指小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准。解决方法包括:1)为父盒子设置border;2)为父盒子添加overflow:hidden;3)为父盒子...

    CSS 外边距(margin)重叠及防止方法

    在CSS布局中,外边距(margin)的重叠是一个常见的现象,特别是在处理多个垂直相邻的块级元素时。...在实际项目中,可以根据具体需求选择合适的方法来解决外边距重叠问题,提升布局的灵活性和可维护性。

    html面试常考考点+css常考考点

    BFC 可以应用于解决 margin 纵向重叠问题和浮动元素的问题。 5. Float 布局的问题和 Clearfix Float 布局可以用于实现三栏布局,中间一栏最先加载和渲染,两侧内容固定,中间内容随着宽度自适应。Clearfix 是一种...

    html之你挡着我了

    清除浮动(clear:both/none)可以帮助解决因浮动引起的问题,防止后续元素跟随浮动元素。 再者,Flexbox(弹性盒子布局)和Grid布局是现代CSS布局的两大利器。Flexbox适用于一维布局,如行或列,通过设置父元素的...

    CSS 清除浮动与BFC的方法

    每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的...

    前端面试常见问题规整.pdf

    - **不与浮动元素重叠**:BFC 内部的块级盒子会根据浮动元素的位置重新排列,避免重叠。 - **包含浮动元素**:BFC 会包含其内部所有浮动元素,避免高度塌陷。 - **阻止文本环绕**:BFC 会阻止文本环绕浮动元素。 **...

    web前端面试指南和高频考题解析,大厂员工整理,pdf和md版本都

    - 盒子大小计算 - margin 的重叠计算 - 浮动`float` - 浮动布局概念 - 清理浮动 - 定位`position` - 文档流概念 - 定位分类 - fixed 定位特点 - 绝对定位计算方式 - `flex`布局 - 如何实现居中对齐? - 理解...

    跨浏览器兼容CSS篇

    ` 防止元素与前一个浮动元素发生重叠。 - 使用清除属性可以避免浮动元素对其后继元素造成影响。 #### 五、优先测试IE浏览器 尽管IE6和IE7不再受到广泛支持,但在项目初期就考虑这些浏览器仍然是明智之举。这样...

    DIV与CSS网页标准化布局

    通常使用clear属性来实现这一点,确保元素不与浮动元素重叠。 使用区块框设计页面布局时,会涉及到布局的灵活性和可重用性。通过合理使用div和span结合CSS样式,可以创建出美观且功能性强的网页布局。在设计布局时...

Global site tag (gtag.js) - Google Analytics