【HTML float 和 absolute】的更多相关文章

float、absolute、inline-block三者区别

0.前言 float属性在css2中是一个热门的属性,被广泛应用于布局之中,同时由于不当使用float带来的问题也非常多,本文结合自己对float的理解以及实际项目中碰到float的相关问题,做一个详细总结,欢迎一起探讨,但未经同意禁止转载.以下是文章的目录 float的特性 float与absolute的区别 float与inline-block 清除浮动的方法及优缺点 1. float的特性 文字环绕 float 最早的设计目的是用于图片,使文字能够环绕在图片周围,像下面这样: 文字环绕效果…

网页布局的应用（float或absolute）

一个浮动(左浮动或右浮动) 垂直环绕布局(float.clear) 左右两列布局(float.absolute) 三栏网页宽度自适应布局(float.absolute) 注意:网页设计中应该尽量避免使用浮动.避免使用absolute 1.一个浮动(左浮动或右浮动) 当一个div里面含有浮动元素和非浮动元素,IE6,7中的浮动元素会出现错位现象. 解决方案:  ①将浮动元素位于非浮动元素的前面.②非浮动设置为浮动元素.③浮动元素设置margin-top的负值. <div class="tit…

HTML float 和 absolute

block元素和inline元素在文档流中的排列方式: block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度.block元素可以设置width.height.margin.padding属性: inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化.inline元素设置width.height属性无效. inline元素的margin和padding属性:…

【CSS】 布局之浮动float和绝对定位absolute的选择

浮动float: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.(W3C) 绝对定位absolute: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框.(W3C) 以上是W3C里对浮动和绝…

【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度

postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute. float中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素. postion属性一共有4…

【20190219】CSS-知识点整理：float、em、浏览器的渲染过程

一.float与absolute 昨天看到一篇博客总结CSS中的一些关键知识点,里面对float元素进行了比较深入的解析,才发现我之前对float的理解不到位.float实际上最初的目的是为了实现图片的文字环绕,所以float元素会漂浮在块元素之上,但是对于文字等内联元素,它不会遮挡漂浮在内联元素之上,而是会把内联元素挤到旁边的空间里去,从而实现图片的文字环绕效果,所以float元素并不是完全的脱离文档流.而设置为absolute定位的元素就是彻底的脱离文档流,会遮挡覆盖在其他元素之上.可参考h…

css之absolute

一.absolute和float有相同的特性,包裹性和破坏性 1.absolute和float的相似(看下面的demo,如果图片在左上角,那么用float和absolute都一样) <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width">…

css float 浮动是个混球

得说,在学习 CSS 的时候就一直在疑惑,横排布局干嘛要用 float 这种属性, 用了还会高度塌陷,怎么不发明些高级点的属性来完成横排布局呢, 甚至所有人都告诉我摒弃表格布局,浮动布局才是 DIV+CSS 时代的产物. 以前我是没得选,现在想想,都过去这么多年了,也许我应该回去看看. 其实当时制定 CSS 的人也许根本就没想过会用 float 来布局,最多来个 word 的那种文本环绕就不错了, 或者说布局本来不是 float 的本职工作,你听过建房子有可能用左右浮动这种办法的吗... 即便如…

深入解析 float

0.前言 float属性在css2中是一个热门的属性,被广泛应用于布局之中,同时由于不当使用float带来的问题也非常多,本文结合自己对float的理解以及实际项目中碰到float的相关问题,做一个详细总结,欢迎一起探讨,但未经同意禁止转载.以下是文章的目录 float的特性 float与absolute的区别 float与inline-block 清除浮动的方法及优缺点 1. float的特性 文字环绕 float 最早的设计目的是用于图片,使文字能够环绕在图片周围,像下面这样: 文字环绕效果…

理解CSS外边距margin

前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性.之前的博文中已经分别详细地介绍了margin的基础知识和负margin的详细用法.本文将详细介绍外边距margin的几个重点部分,包括重叠.auto和无效情况 重叠 [前提]   margin重叠又叫margin合并,发生这种情况有两个前提   1.只发生在block元素上(不包…