float浮动的一些感想。

float:left | right | none | inherit;

文档流是文档中可显示对象在排列时所占用的位置。

浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

clear:left | right | both | none | inherit;元素的某个方向上不能有浮动元素

clear:both;  在左右两侧均不允许浮动元素。

float特征

1、块在一排显示

2、内联支持宽高。(span在float之后就可以支持宽高了。)

3、默认内容撑开宽度

4、脱离文档流

5、提升层级半层

清除浮动的方法:总结

1.加高-给父级加高度

问题:扩展性不好

2.父级浮动

问题:页面中所有元素都加浮动,margin左右自动失效(floats bad !)

3.inline-block 清浮动方法:给父级加

问题:margin左右auto失效;

4.空标签清浮动

问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)

5.br清浮动<br clear=”all”/>

问题:不符合工作中:结构、样式、行为,三者分离的要求。

6.after伪类 清浮动方法(现在主流方法)

.clear:after{content:‘‘;display:block;clear:both;}

.clear{zoom:1;}解决ie6不兼容的问题。

after伪类:元素内部末尾添加内容;

:after{content"添加的内容";} IE6,7下不兼容

zoom 缩放

a、触发 IE下 haslayout,使元素根据自身内容计算宽高。

b、FF 不支持;

7.overflow:hidden 清浮动方法;

问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;

overflow:  scroll | auto | hidden; 滚动条//隐藏

overflow:hidden;溢出隐藏(裁刀!)

但是对于一些网页中有返回上层,或者分享链接等小功能模块的overflow就会产生问题,具体什么问题待添加。

时间: 2024-10-08 15:07:09

float浮动的一些感想。的相关文章

CSS布局之float浮动

之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料是其一,但我觉得更重要的是把你遇到的问题和解决方法记录下来..这样以后你的开发效率是多高.言归正传,对浮动进行一些记录. 1.首先,网页是一个文档流,默认按块元素和级联元素从左到右,从上至下的依次显示.而Float浮动元素,就好比是漂浮在了文档流之上,不占据文档流的位置. 如下就是不进行任何浮动的文

CSS float浮动的深入研究、详解及拓展(一)

概念目录 个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是"包裹及破坏" 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮动其实是个魔鬼.混球 一.引言 你我看待事物的方式不同,价值取向也不同,因为我们有着不同的世界观,价值观.这种世界观的差异不仅仅体现在实际的生活中,也反映在代码上.你我看待代码的方式,或者说是代码在我们情感层面的位置是不一样的,我这里说的是情感层面,与逻辑无关,与算法无关(虽然算法受情感影响).这种看待

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <

&lt;转载&gt;如何解决子级用float浮动父级div高度不能自适应的问题

转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML

解决子级用css float浮动 而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

归纳篇(一)CSS的position定位和float浮动

近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位: 3.static:默认值,没有定位,元素出现在正常的文档流中; 4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动: 5.sticky:(CSS3)有兼

overflow解决float浮动后高度自适应问题

也许你在做网页的时候发现,发一个区块内的元素被应用了float之后,那么整个box的高度对就不以被浮动对象的高度为标准了.如图中的城市导航内的城市列表中采用了float之后,那个外框的高度并不是内容元素的高度: 怎么解决这个问题呢?经发现可以采用overflow来解决!方法是在父元素加上如下代码即可 overflow:auto; zoom:1; overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决. 1 1 <!DOCTYPE h

清除float浮动造成影响的几种解决方案

1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内联img元素,此时div的高应该是图片img撑开的高度,当设置了图片img元素设置浮动后,div高度就会坍塌 浮动的破坏性 浮动导致高度坍陷代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef