float浮动改变display类型

position:absolute和float都会隐式的改变display类型。

也就是说,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示。

可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效。

但position:relative并不能够隐式的改变display的类型

参考:

http://blog.163.com/[email protected]/blog/static/1804698120133584314892/

http://www.cnblogs.com/fu277/archive/2012/03/13/2393519.html

时间: 2024-11-05 12:23:55

float浮动改变display类型的相关文章

行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

行内元素水平居中如何设置?如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>行内水平居中设置</title> 6 <style type="text/css"> 7 div.box

隐性改变display类型

隐性改变display类型 有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一: position : absolute float : left 或 float:right 元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素. 如下面的代码,小伙伴们都知道 a 标签是行内元素,所以设置它的 width 是 没有效果的,但是设置为 posit

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

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

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

CSS float浮动的深入研究.详解及拓展(一) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=583 一.浮动的原始意义是什么? 浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已.而我们目前用浮动实现页面布局本不是浮动该干的事情. 二.浮动的本质是什么? 我将浮动的本质定义为“包裹与破坏”! 1. 浮动的“包裹性”撇开浮动的“破坏性”,浮动就是个带有方位的d

第九篇 float浮动

float浮动 首先老师要声明,浮动这一块,和边距.定位相比,它是比较难的,但是用它,页面排版会更好. 这节课就直接上代码,看着代码去学浮动. 我们先弄一个div,给它一个背景颜色: HTML: <div id="div1">我是浮动div</div> CSS: #div1{ background-color: aquamarine; } 这里同学们能看到,div1,它占据整行,有一个背景色.那么我们先来看看给它设置一个float(浮动)属性: CSS: #di

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

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

清除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

Css布局系列-float 浮动

准备讲一个布局系列由浅入深,先讲解一些基本属性理论,在通过实例与理论相结合,争取讲明白讲清楚.欢迎大家一起讨论,一起学习一起奋斗.废话少说,先去官方网站看看是怎么解释定义float浮动. 官方定义: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄.假如在一行之上只有极少的空间可供浮动元素,那么这个元素