清除浮动的几种常见方法

1 <div class="container">
2     <p style="float:left">这是一段浮动文字</p>
3 </div>

1.在container父容器末尾加上一个清除浮动的div标签

1 <div class="container">
2     <p style="float:left">这是一段浮动文字</p>
3     <div style="clear:both"></div>
4 </div>

这种方法的缺点是在html结构中增加了许多无意义的标签

2.给父容器也添加float:left

这种方法不推荐使用，因为一旦html结构层次比较多时，就要不断在每个父容器上添加浮动属性，影响整个页面的布局

3.在父容器上添加overflow属性

添加overflow:auto或者overflow:hidden都可以，添加overflow属性后浮动元素就会重新回到父容器中

4.在父元素添加.clearfix:after（推荐）

1 <div class="container clearfix">
2     <p style="float:left">这是一段浮动文字</p>
3 </div>

 1 .clearfix:after{
 2     content:".";
 3     display:block;
 4     height:0;
 5     clear:both;
 6     visibility:hidden;
 7 }
 8
 9 .clearfix{    /*兼容IE6、7*/
10     zoom:1;
11 }

这个方法的原理与第一种方法类似，实际上.clearfix中除了clear:both是起到清除浮动作用，其他属性的主要功能是为了隐藏元素，这是目前比较推荐的用法

5.基于第四种方法的改良

第五种方法是对第四中方法的改写，写法更加优雅

1 .clearfix:after,
2 .clearfix:before{
3      content:" ";
4      display:table;
5 }
6
7 .clearfix:after{
8     clear:both;
9 }

加上.clearfix:before是为了防止元素之间的margin-top和margin-bottom发生重叠

转载于:https://www.cnblogs.com/NickyLi/p/6708306.html

清除浮动的几种常见方法相关推荐

CSS清除浮动的几种常见方法
文章目录浮动优点缺点清除浮动一.额外标签法实例二.父级添加overflow属性实例三.使用:after 实例四.使用双伪元素实例五.手动设置父级高度实例注意浮动当元素浮 ...
css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行,并 ...
div清除浮动的四种方式
div 清除浮动的四种方式清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题. 简单来说给父元素加一个高度也能解决这个问题,但是很多情况下不方便给父元素高度.所以,一般情况下,应该让子元 ...
[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
CSS的浮动及清除浮动的5种方法
浮动是布局的时用到的一种技术,能够方便我们进行布局. 1.浮动的设置:css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 2.浮动的原理:使当前元素脱离普通流,相当于 ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
CSS清除浮动的几种方法
来源 | https://www.html.cn/web/css/19613.html 今天这篇文章给大家介绍一下CSS清除浮动的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮 ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...

清除浮动的几种常见方法

清除浮动的几种常见方法相关推荐

最新文章

热门文章