css 浮动
1. 浮动
浮动是css的布局功能,在CSS中,包括div在内的任何元素都可以浮动的方式显示。它能够改变页面中对象的前后流动顺序。浮动元素会脱离文档流,不占据空间。浮动元素可以左右移动,直到碰到包含它的边框或者浮动元素的边框停留。
2. 浮动可能带来的问题
父元素的高度无法撑开,影响与父元素同级的元素;与浮动元素同级的非浮动元素会紧跟其后,可能导致看不到非浮动元素的情况;浮动元素可能会影响到页面的整理布局效果
3. 清除浮动影响的方法
(1)使用空标签清除浮动
在所有浮动标签后面添加一个空标签,样式设置为clear:both;,如<div style="clear:both;"></div>此方法增加了无意义的标签,与HTML5语义化标签相违背。
(2)使用overflow或者display:table
给包含浮动元素的父标签添加css属性 overflow:auto/overflow:hidden; zoom:1;使用该属性来闭合浮动,触发BFC/haslayout。使用 zoom:1 兼容IE6,大多数情况下它能在不影响现有环境的条件下激发元素的 haslayout。display:table 本身并不会创建BFC,但是它会产生匿名框(anonymous boxes),而匿名框中的display:table-cell可以创建新的BFC。
(3)将父元素也设置为浮动
float:left/float:right 将父元素也设置为浮动就可以包含浮动内容;
(4)使用伪元素:after
其中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;.clearfix:after{display:block;clear:both;content:”";visibility:hidden;height:0;} .clearfix{zoom:1;}
其中display:block 使生成的元素以块级元素显示,占满剩余空间;clear:both用来闭合浮动的;通过 content:" "生成内容作为最后一个元素,至于content里面是空还是点还是其他都是可以的;
visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互; height:0 ;避免生成内容破坏原有布局的高度;zoom:1 触发IE hasLayout。除了clear:both用来闭合浮动的,其他代码都是为了隐藏掉content生成的内容,也有使用font-size:0,line-height:0来隐藏内容的。
css 浮动的更多相关文章
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- CSS浮动讲解好文章推荐
经验分享:CSS浮动(float,clear)通俗讲解 http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 好文推荐!
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
- CSS浮动专题!
在css中,浮动问题可能是很多刚入门的小白比较头疼的问题. 1,首先先来介绍一下两种浮动类型:左浮动和右浮动 1) float:left;左浮动,后面的内容会流向对象的右侧 2) float:righ ...
- css浮动与清除浮动
css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- Css - 浮动布局
Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...
- CSS 浮动和清除
CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...
- 验分享:CSS浮动(float,clear)通俗讲解
经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...
随机推荐
- Elasticsearch 配置
Elasticsearch 配置 Elasticsearch不仅仅是Lucene和全文搜索,我们还能这样去描述它: 分布式的实时文件存储,每个字段都被索引并可被搜索 分布式的实时分析搜索引擎 可以扩展 ...
- Ajax例子,views返回,html接收数据
Ajax例子,views返回,html接收数据 views from django.shortcuts import render,HttpResponse,render_to_response im ...
- delphi学习笔记1
快捷键CTRL+ENTER 定位到单元文件 F6快速查找文件 uses语句和include 指令 C++程序员应该知道uses语句和include 指令是不同的.uses语句只是用于输入引用单元的预编 ...
- SQL Server错误与事务处理
T-SQL中出现的错误,依据和事务的关系,可以分为两种情况: 有的错误会导致发生错误位置之后的代码不再执行,如果错误位置在事务中,该事务也会自动回滚(即在错误位置之后的rollback语句不会执行,但 ...
- grunt安装、配置、在webstrom中使用
1.全局范围安装 Grunt命令行(CLI) npm install -g grunt-cli Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt.这样带来的好处是,允许 ...
- jvm基础笔记
名词解释: 三类参数:标准参数(可能不会变的,java -help列出来的就是这类的),X参数(非标准化参数),XX参数(扩展参数). 所有XX 参数都以-XX开始,但后面出现的+-就不同了.+代表激 ...
- 分列:将excel单元格的内容拆分为两列
提要:处理excel数据时有时需要把单元格的内容拆分为两列,可能方便外部软件的链接,可能使数据显示更明晰等等,有人说直接剪切加粘贴不就可以了吗,但是有时数据过多,这样处理很不效率,网上搜索的方法说插入 ...
- 10. 星际争霸之php设计模式--原型模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- python核心编程学习记录之模块
- SC.UI
IController using Microsoft.Practices.Prism.Events; using Microsoft.Practices.Prism.Regions; using M ...