当前位置：首页 > Web前端 > HTML

清除浮动的几种有效方法

时间：2023-04-02 16:42:44 HTML

浮动是CSS布局中最常用的属性，但是浮动不在文档流中，不清除浮动会影响周围的元素。也正是浮动脱离文档流的特性，使得浮动成为CSS布局的难点之一。浮动框可以左右移动，直到它的外边缘接触到包含框或另一个浮动框的边缘。当元素浮动时，将不再处于正常的文档流中，相当于浮动在文档上，不占空间，但会缩短行框，产生文字环绕的效果有更好的清除方式浮动的，但是兼容各种浏览器，但是controller的方法不多，所以我介绍几个比较有效和兼容的方法：下面以HTML代码为例来说明这些方法的用法：

父级设置CSS高度的原理：父级div手动定义height，解决了父div无法自动获取高度的问题优点：简单，代码少，容易掌握缺点：只适用于固定高度的布局，必须给出准确的高度，如果高度不同来自父div，会出现问题建议：不推荐，只推荐固定高度使用相应的CSS代码进行布局：#box{width:500px;边距：10px自动；背景：#ccc;height:500px;/*解决方案代码*/}#sidebar{width:190px;高度：500px；向左飘浮;背景：#f00；}#main{宽度：300px；高度：500px；浮动：对；background:#00f;}Extralabel方法这种方法是在浮动元素的末尾添加一个标签，利用这个标签来清除浮动元素。就是添加

，当然也可以是其他标签，比如p、br等，本例添加在。对应的CSS代码：#box{width:500px;边距：10px自动；背景：#ccc;}#sidebar{宽度：190px;高度：500px；向左飘浮;背景：#f00;}#main{宽度：300px;高度：500px；浮动：对；background:#00f;}/*清除浮动代码*/.clear{clear:both;}原理：添加一个空div，使用cssclear:both清除浮动，让父div的高度可以自动获取优点：简单，代码少，浏览器支持好，不容易出现奇怪的问题缺点：很多初学者不懂原理，如果页面浮动布局很多，需要加很多空div，让人觉得很不舒服好建议：不推荐，但是这个方法是以前主要用的清除浮动的方法}#sidebar{width:190px;高度：500px；向左飘浮;背景：#f00；}#main{宽度：300px；高度：500px；浮动：对；background:#00f;}/*解决方案代码*/#box:after{display:block;清除：两者；内容：””;可见性：隐藏；height:0}原理：IE8及以上及非IE浏览器只支持:after，原理和方法2类似，zoom(IEonlyHasattributes)可以解决ie6和ie7的浮动问题优点：浏览器支持好，不容易出现奇怪的问题（目前：大网站都在用，比如：腾讯、网易、新浪等）缺点：代码多，很多初学的不懂原理，需要两行代码才能主流浏览器是否支持建议：推荐，建议定义一个public类来减少CSS代码parentdivdefinitionoverflow:hidden#box{width:500pX;边距：10px自动；背景：#ccc;overflow:hidden;/*解决方案代码*/}#sidebar{width:190px;高度：500px；向左飘浮;背景：#f00;}#main{宽度：300px;高度：500px；浮动：对；background:#00f;}原则：width或zoom:1必须定义，不能同时定义height。当使用overflow:hidden时，浏览器会自动检查浮动区域的高度。优点：简单，代码少，浏览器支持好缺点：不能和position结合使用，因为多余的size会被隐藏建议：仅限不使用position或者对overflow:hidden理解很深的朋友使用父div来定义overflow:auto#box{width:500px;保证金：10自动；背景：#ccc;overflow:auto;/*解决方案代码*/}#sidebar{width:190px;高度：500px；向左飘浮;背景：#f00；}#main{宽度：300px；高度：500px；浮动：对；background:#00f;}原则：width或zoom:1必须定义，不能同时定义height。使用overflow:auto时，浏览器会自动检测浮动区域的高度。优点：简单，代码少，浏览器支持好缺点：当内部宽高超过父div时，会出现滚动条建议：不推荐，如果需要滚动条就使用或者保证你的代码不出现滚动条

上一篇：【Amaple教程】1.启动路由

下一篇：UI5、CRM、S-4HANA中的Association、Composition和Aggregation

清除浮动的几种有效方法相关文章

最新推荐

猜你喜欢