如何清除浮动(float)所带来的影响
清除浮动(float)
1.定义和用法
在w3c中给了浮动这样的定义。
"float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素"。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
通俗的来讲，浮动就是让默认标准文档流下的元素漂浮起来并水平排列。
让图像右浮动：img { float:right; }
值：
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
2.浮动所带来的影响
1) 行内元素浮动之后可以支持宽高;
2) 文本会给浮动定位的元素让位(可以以此制作文本绕排的效果);
3) 在父级没有给高度的情况下,子级浮动后父级会没有高度;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容生成清除浮动</title>
<style type="text/css">
#container{
border: 1px solid #000;
padding: 20px;
background-color: #0000FF;
}
#d1,#d2,#d3{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #000;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</div>
</body>
</html>
如图,一般来说父级中的内容会将其高度撑起来,但图中并没有;
3.清除浮动
如何清除浮动,这里介绍4种方法:
1) 在父级的最后添加一个空的div,添加clear属性;
<body>
<div id="container">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div style="clear: both;"></div>
</div>
</body>
这里不推荐使用这种方法,因为会在页面添加无用的标签,会使页面布局复杂化;
2) 给父级设置overflow:hidden;(溢出隐藏)
会触发bfc(block formatting context)--块级格式化上下文;
<body>
<div style="overflow:hidden">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</div>
</body>
同样也不推荐使用,因为这个属性与定位一起使用时会有副作用.
3)使用伪元素after(推荐使用)
.clearfix:after{
content:""; /*内容为空*/
height:; /*高度为0*/
line-height:; /*行高为0*/
display:block; /*块级元素*/
visibility:hidden; /*隐藏*/
clear:both; /*行高为0*/
}
.clearfix{
zoom:; /*兼容IE678*/
}
<div class="clearfix" >
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</div>
4) 使用双伪元素:after和before(不推荐使用,不严谨)
.clearfix:after ,clearfix:before{
content:"";
display:table;
clear:both;
}
.clearfix{
zoom:1; /*兼容IE678*/
}
如何清除浮动(float)所带来的影响的更多相关文章
- 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
- css清除浮动float
css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...
- 更优雅的清除浮动float方法
上篇文章是利用 :after 方法清除浮动float(作用于浮动元素的父元素上). ; } //为了兼容性,因为ie6/7不能使用伪类,所以加上此行代码. .outer:after {;;visibi ...
- css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class=&quo ...
- css清除浮动float的三种方法总结
原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- 清除浮动float (:after方法)
1. 什么时候需要清除浮动?清除浮动有哪些方法? (1)对元素进行了浮动(float)后,该元素就会脱离文档流,浮动在文档之上.在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是 ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
随机推荐
- str2-045漏洞事件，你想要的这里都有
话说昨天一觉醒来,发现整个安全圈被一个名为str2-045的漏洞霸屏了,好多小伙伴已经开始了喜刷刷的艰苦奋斗过程.然而对于很多小白童鞋来讲,他们可能还是处于懵逼的状态,别急,咱们专门为你们做了一期专题 ...
- 每天学点SpringCloud（十四）：Zipkin使用SpringCloud Stream以及Elasticsearch
在前面的文章中,我们已经成功的使用Zipkin收集了项目的调用链日志.但是呢,由于我们收集链路信息时采用的是http请求方式收集的,而且链路信息没有进行保存,ZipkinServer一旦重启后就会所有 ...
- Python学习笔记【第八篇】：Python内置模块
什么时模块 Python中的模块其实就是XXX.py 文件 模块分类 Python内置模块(标准库) 自定义模块 第三方模块 使用方法 import 模块名 form 模块名 import 方法名 说 ...
- 生产apollo搭建记录（五）
1. 生产apollo搭建记录(五) 1.1. 目标 搭建两个环境配置,dev和pro,但目前可用服务器限制,打算mysql用同一个,服务器分生产和测试 1.2. 数据库 建三个库 注意注意:在启 ...
- Spring Cloud微服务如何设计异常处理机制？
导读 今天和大家聊一下在采用Spring Cloud进行微服务架构设计时,微服务之间调用时异常处理机制应该如何设计的问题.我们知道在进行微服务架构设计时,一个微服务一般来说不可避免地会同时面向内部和外 ...
- Xamarin.Android 利用Fragment实现底部菜单
效果图: 第一步:添加引用 引用 Crosslight.Xamarin.Android.Support.v7.AppCompat 这个包. 第二步:绘制Main和Fragment界面 fg_home. ...
- Android--UI之DatePicker、TimePicker...
前言 这一篇博客分别讲解Android平台下,关于日期和时间的几个相关控件.包括DatePicker(日期选择控件).TimePicker(时间选择控件).DatePickerDialog(日期选择对 ...
- 【干货】利用MVC5+EF6搭建博客系统（四）（上）前后台页面布局页面实现，介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 06 使用Tensorflow拟合x与y之间的关系
看代码: import tensorflow as tf import numpy as np #构造输入数据(我们用神经网络拟合x_data和y_data之间的关系) x_data = np.lin ...
- 分析windows .net程序dump文件的两种方式
1.WinDbg 按照自己系统版本下载对应windbg(https://debugging.wellisolutions.de/windbg-versions/),win10版本自动下载文件符号,体验 ...