web前端，css清除浮动的常见方法

一、为什么要清除浮动

当我们为盒子设置浮动样式的时候，这是盒子将会脱离标准流，这样原先布局的其他内容将会占据盒子的位置，这样就没法看见相关内容。
而在清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

二、常见清除浮动的方式

1.额外标签法（隔墙法）

额外标签法就是在浮动元素的末尾添加一个空标签。(空标签只能是块级元素)

        <div class="leftBox">1</div><div class="rightBox">2</div><div style="clear: both;"></div></div><div class="normalBox"></div>

2.overflow方式清楚浮动

给父元素添加 overflow属性，并且属性值设置为hidden、auto或者scroll即可清除浮动

3.：after伪元素清除浮动

给父元素添加clearfix样式

 .clearfix:after {content: "";display: block;clear: both;height: 0;visibility: hidden;}/* 兼容ie6ie7 */.clearfix {*zoom: 1}

4.双伪元素清除浮动

        .clearfix:after,.clearfix:before {content: "";display: table;}.clearfix:after {clear: both;}/* 兼容ie6ie7 */.clearfix {*zoom: 1}

以上便是清除浮动的常见方式

注：文章仅供参考学习，如有侵权请联系作者

web前端，css清除浮动的常见方法相关推荐

Web前端CSS清除浮动的5种方法
在移动端清除浮动布局,常用的5种方法: 使用清除浮动的类: 使用overflow属性: 使用 flex 布局: 使用grid 布局: 使用 table 布局. 根据实际情况选择适合的方法,需要注意兼容 ...
web前端css清除浮动的方法总结
方法1:祖先加高法 //不常用,不能适应页面的快速变化如果一个元素要浮动,那么它的祖先元素一定要有高度.有高度的盒子,才能关住浮动. 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元 ...
css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...
css清除浮动的处理方法
根据<精彩绝伦的css> <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
css清除浮动的集中方法
一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...
前端css 清除浮动的几种方式
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样.浮动的块框会漂浮在文档普通流的块框上. 清 ...
css清除浮动的六种方法
css中使用float属性时会造成局部坍塌或者内容上顶以及文字环绕等一系列情况出现. 总结了一共六种方法其中有两种最为常用: 1.height属性给父元素设置固定高度当父元素下的子元素进行了浮动时, ...
css清除浮动4种方法
为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性. 而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动 ...
CSS清除浮动的方法及原理
为什么清除浮动 1.浮动的缺点: 浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的"副作用".一个元素设置了浮动(即 float 值为 left, right 或 ...

web前端，css清除浮动的常见方法

一、为什么要清除浮动

二、常见清除浮动的方式

1.额外标签法（隔墙法）

2.overflow方式清楚浮动

3.：after伪元素清除浮动

4.双伪元素清除浮动

以上便是清除浮动的常见方式

web前端，css清除浮动的常见方法相关推荐

最新文章

热门文章