彻底理解浮动float CSS浮动详解 清除浮动的方法

简介: 原文:彻底理解浮动float CSS浮动详解 清除浮动的方法 我们把网页的常用的布局格式分为以下三种:   1.标准流。  所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的。 以前我们学习的都是标准流。
原文: 彻底理解浮动float CSS浮动详解 清除浮动的方法

 我们把网页的常用的布局格式分为以下三种:

  1.标准流。

 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的。
以前我们学习的都是标准流。
  注意:标准流使我们网页布局中最稳定的一种结构

 
    2. 浮动流

 使我们学习的脱离标准流的第一种方式。会影响我们标准流的排列。所以,我们布局的时候,能用标准流做的,就不用浮动做。
 

    3. 定位流

  定位流也是脱离标准流的一种模式。它完全脱离标准流,不会对标准流有影响。
 
 

浮动(float)

我们要浮动的目的: 我们浮动的目的,就是可以把多个块级元素放到想要的一行上。

浮动 Float: left   right   none
 
你不得不必须知道详细的理解浮动:

  1.  浮动已经脱离的标准流。 (脱标)

      也就是说,浮动已经漂浮在标准流的上方。

  2. 因为我们的浮动是左右浮动,所以我们的块级元素都是左右排列。


清除浮动(clear)

如果想要我们做的网页浏览器兼容性好,首先要保证的是,我们写的代码要足够标准。

清除浮动的原因:  因为浮动会影响标准流。所以我要根据不同情况来清除浮动。

Clear:both;

1.1.1额外标签法

W3c推荐,再最后一个浮动的盒子的后面,新添加一个标签。然后他可以清除浮动。
 
 小强零零壹 http://www.xiaoqiang001.com

优点:  通俗好理解
缺点:  增加了太多的标签

1.1.2Overflow 清除浮动

使用方法:  是浮动的大盒子(父级标签)再样式里面加: overflow:hidden;为了照顾ie6,我们再加上 zoom:1;
小强零零壹 http://www.xiaoqiang001.com

优点: 代码书写方便
缺点: 如果这个父盒子,里面还有定位,就会引起麻烦。

1.1.3 After伪类清除浮动

  1. 声明清除浮动:

.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
height:0;
}
.clearfix{ /* 为了照顾ie6浏览器*/
zoom:1;
}
 

  1. 调用

<div class="box clearfix">
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow清除浮动</title>
<style type="text/css">
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
height:0;
}
.clearfix{ /* 为了照顾ie6浏览器*/
zoom:1;
}
.box{width:400px;}
.one,.two{width:200px; height:100px; background-color:#093; float:left;}
.two{background-color:#39F;}
.test{width:400px; height:120px; background-color:#900;}
 
</style>
</head>
<body>
<div class="box clearfix">
<div class="one"></div>
    <div class="two"></div>
</div>
<div class="test"></div>
</body>
</html>

 
   优点: 一次写完,后面直接调用就可以了
   缺点: 声明麻烦写   

1.1.4After before伪类清除浮动

  1. 声明清除

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{ /*照顾ie6*/
zoom:1;
}
使用:
<div class="box clearfix">

  第四种,是大部分大型网站常用的,比如新浪 淘宝 的清除浮动的效果。

 

以上希望对大家有所帮助。

小强零零壹和大家一起分享。

目录
相关文章
|
3月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
71 2
|
3月前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
3月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
4月前
|
存储 数据采集 数据处理
Pandas中批量转换object至float的高效方法
在数据分析中,常需将Pandas DataFrame中的object类型列转换为float类型以进行数值计算。本文介绍如何使用`pd.to_numeric`函数高效转换,并处理非数字值,包括用0或平均值填充NaN值的方法。
228 1
|
4月前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
50 1
|
5月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
35 2
|
5月前
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
158 3
|
5月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
36 3
|
4月前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
41 0
|
5月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。

热门文章

最新文章