前端css 清除浮动的几种方式

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

清除浮动的几种方式

1. 父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。简单、代码少、容易掌握，但只适合高度固定的布局.

2. 结尾处加空div标签 clear：both

原理：在浮动元素的后面添加一个空div兄弟元素，利用css提高的clear：both清除浮动，让父级div能自动获取到高度，如果页面浮动布局多，就要增加很多空div，让人感觉很不好.

3. 父级div定义伪类：after 和 zoom /*清除浮动代码*/

.clearfix:after{

content：""；

display：block；

visibility：hidden；

height：0；

line-height：0；

clear：both；

}

.clearfix{zoom：1}

原理：IE8以上和非 IE 浏览器才支持：after，原理和方法2有点类似，zoom(IE 专有属性)可解决 ie6，ie7浮动问题，推荐使用，建议定义公共类，以减少 CSS代码。

4. 父级div定义 overflow：hidden 超出盒子部分会被隐藏，不推荐使用.

5.双伪元素法：

.clearfix：before，.clearfix：after {

content： ""；

display： block；

clear： both；

}

.clearfix { zoom： 1；}

前端css 清除浮动的几种方式相关推荐

css 清除浮动的几种方式
css 清除浮动的几种方式浮动布局和定位布局为css中布局的常用的两种布局方式,而且兼容性会比较好.随着flex的流行,以后会是主流. float布局会脱离文档流,对页面的布局造成影响,比如造成父级 ...
CSS—清除浮动的几种方式
什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版.浮动只有左右浮动.2--浮动元素A的位置与上一个元素有关系.如果上一个元素有浮动,则A的顶部与上一个元素顶部对 ...
css清除浮动的几种方式
前言: CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. css浮动但是使用了float后不清除浮 ...
Web前端CSS清除浮动的5种方法
在移动端清除浮动布局,常用的5种方法: 使用清除浮动的类: 使用overflow属性: 使用 flex 布局: 使用grid 布局: 使用 table 布局. 根据实际情况选择适合的方法,需要注意兼容 ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
清除浮动的几种方式，以及各自的优缺点
清除浮动的几种方式,以及各自的优缺点 1.使用空标签清除浮动clear:both. 2.给父级div定义overflow:hidden 3.父级div定义伪类:after和zoom(用于非IE浏览器) ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...
清除浮动的四种方式及其原理
前言: 什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它.下面会介绍到为什么要清除浮动以及清除浮动的四种方式. 目录: 前言: 一.为什么要清除浮动二.清除浮动的第一种方式---给父 ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...

前端css 清除浮动的几种方式

清除浮动的几种方式

前端css 清除浮动的几种方式相关推荐

最新文章

热门文章