CSS浮动、绝对、相对定位

css 浮动相对定位绝对定位区别

今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然还得找人去做:不同的是,后台的就可以放心找人做,只要测试得没问题,效率还过得去就可以了,所以最近打算学好点前端,自己接一些单子来做.废话不多说,入正题: html是按照文件流(普通流)的方式加载的,但是全部是普通流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念. 一.首先…

css 浮动绝对定位和相对定位

html是按照文件流(文档流)的方式加载的,但是全部是文档流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念. 一.首先,按照文档流和非文档流来分类: ①文档流:就是按照上下左右的顺序一行一行排列的,长度不够就会自动挤到下一行. ②非文档流:顾名思义就是脱离文档流的,在文档流上面是不占据位置的.css有position的样式,position包括:static,relative,absolute,fixed四种值.其中static是属于文档流:relative也是属于特…

CSS浮动、定位

这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 二.有几种定位方式,分别是如何实现定位的,使用场景如何? CSS定位方式有四种:默认定位(static).相对定位(r…

css浮动(float)及清除浮动的几种实用方法

CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行,并在每行中按从左到右的顺序排放元素. (2)网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域. 当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position.float.display来控制.默认情况下,所有元素都处在文档流中,四种情况将使得元…

css浮动(float)及如何清除浮动

前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流自窗体自上而下分成一行一行,并在每行中按从左到右的顺序排放元素.(2)网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域. 当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position.float.display来控制.默认情况下,所有元素都处在文档流中,四种情况将使…

css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中浮动值: left:向左浮动 right:向右浮动 html文档流:自窗体自上而下分成一行一行,并在没行中从左到右的顺序排放元素. 通过例子来解释浮动 1.页面上有两个块元素,每个块元素独占一行 2.我们希望他们能并排显示,这是就可以使用float,我们先给红色的div加float:left,发现两个是在一行了,但是他们重叠在了一起. 3.这是…

CSS浮动讲解好文章推荐

经验分享:CSS浮动(float,clear)通俗讲解 http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 好文推荐!…

css浮动布局

上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的网页基本布局主要有三种形式:一是标准流,而是浮动流,三是定位流. 标准流(文档流/普通流)排版方式其实浏览器默认的排版方式就是标准流的排版方式在CSS中将元素分为2大类, 分别是块级元素/行内元素还有一类是行内块级元素,它本质上是行内元素,不会占据一行,但又具有块级元素的属…

CSS浮动专题!

在css中,浮动问题可能是很多刚入门的小白比较头疼的问题. 1,首先先来介绍一下两种浮动类型:左浮动和右浮动 1) float:left;左浮动,后面的内容会流向对象的右侧 2) float:right; 右浮动,后面的内容会流向对象的左侧举例来说,三个块级元素,第一个设置浮动后,第一个块级元素将不再占用块级位置,第二个将会取代第一个的位置 2,由于浮动会使浮动对象后面的布局错乱,因此引入了清除浮动: clear:both; 注意:下面是设置浮动后常见的几个问题 (一)设置浮动后在一行的两个块…

css浮动与清除浮动

css浮动首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,div2和div3 是不会排在div1的后面,这是在标准流中的理论,但是,有些时候,我们的需求不仅仅是这样,我们需要在一行内显示多个div元素,所以,标准流已经不能满足我们的需求.这个时候就用到浮动. 浮动的框可以左右移动,直至它的外边缘碰到包含框或另一个浮动框的外边缘.浮动框不属于文档中的普通流,当一…

Css - 浮动布局

Css - 浮动布局浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一行显示,所以没有这个必要 1.一旦元素浮动,则它会脱离标准文档流,它会悬在它原来的位置上面,也即它原来占据的位置被腾空.比如:两个兄弟div,A在前,B在后,当A向左浮动后,B就会占据A的位置,但由于A悬浮在B上面,所以会看不到B,看起来就是两个盒子在一个位置.但是如果它下面的元素是行内/行内块元素…

CSS 浮动和清除

CSS 浮动和清除浮动在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动的定义使元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰到包含框或另一个浮动框的边框为止. 说到脱离文档流要说一下什么是文档流,文档流是是文档中可显示对象在排列时所占用的位置/空间,而脱离文档流就是在页面中不占位置了. 二.属性 float:left: 左…

验分享：CSS浮动(float,clear)通俗讲解

经验分享:CSS浮动(float,clear)通俗讲解很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素…

CSS浮动与清除浮动(overflow)例子

在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神奇,于是乎就去问了师匠: Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes which are e…

CSS浮动并清除浮动(造成的影响)

一.浮动 CSS浮动 CSS float浮动的深入研究.详解及拓展(一) CSS浮动属性Float详解块级元素独占一行块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的. 注意,以上这些理论,是指标准流中的div.无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”. 浮动浮动:浮动的框可以左右移动,直至它的外边缘遇到包…

CSS浮动为什么不会遮盖同级元素

1.问题描述在W3CSchool学习web前端时,看完CSS定位-浮动这一节后,感觉没有什么问题.但是在CSS高级-分类这一节的中进行实践时,遇到了如下问题.测试地址:浮动的简单应用. 完整的html+CSS源码如下: <html> <head> <style type="text/css"> img { border:solid 1px green; display:block; } #id1{ float:left; } div{ border…

CSS浮动和清除

float:让元素浮动,取值:left(左浮动).right(右浮动) clear:清除浮动,取值:left(清除左浮动).right(清除右浮动).both(同时清除上面的左浮动和右浮动) 1.CSS浮动浮动的元素,将向左或向右浮动,浮动到包围元素的边上,或上一个浮动元素的边上为止. 浮动的元素,不再占空间了,并且,浮动元素的层级要高于普通元素. 浮动的元素,一定是“块元素”.不管它原来是什么元素. 如果浮动的元素,没有指定宽度的话,浮动后它将尽可能的变窄.因此,浮动元素一般要定宽和高. 一…

css 浮动元素居中

方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css浮动盒子居中</title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ background: #fffccc; } .box{ background-c…

CSS ,浮动，clear记录，和一些转载别处

DIV+CSS clear both清除产生浮动我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. clear 属性规定元素的哪一侧不允许其他浮动元素 1.clear语法:clear : none | left|right| both 值描述 left 在左侧不允许浮动元素. right 在右侧不允许浮动元素. both 在左右两侧均不允许浮动元素. none 默认值.允许浮动元素出现在两侧. inherit 规定应该从…

【使用DIV+CSS重写网站首页案例】CSS浮动

CSS浮动: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘为止由于浮动框不在文件的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 选择器之 float属性: left:向左移动 right:向右移动选择器之clear属性:用于清除浮动 left:在左侧不允许浮动元素 right:在右侧不允许浮动元素 both:在左右侧均不允许浮动元素情况演示1:(无浮动) <!DOCTYPE html> <html> <head> &l…

[CSS]CSS浮动塌陷及解决办法

一. CSS浮动先看一个例子 <html !DOCTYPE> <head> <title>HTML2</title> <style> .div-outer { border: solid 2px #223344; } .div1 { width: 200px; height: 100px; border: solid 2px #667788; } .div2 { width: 200px; height: 100px; border: soli…

css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕再来看看浮动的具体定义: 浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘.浮动框不属于文档中的普通流,属于浮动布局. (CSS三种基本的定位机制:普通流.浮动和绝对定位) 当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会…

CSS 浮动（二）

CSS 浮动本人是一名大二学生,欢迎大家进行交流 V15774135883 推荐一个是自学的网站里面有超多培训机构的大课,地址有需要可以加我免费拿! 传统网页布局的三种方式网页布局的本质--用 CSS来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动定位浮动(float) 1 标准流(普通流/文档流) 所谓的标准流: 就是标签按照规定好默认方式排列. 块级元素会独占一行,从上向下顺序排列. 常用元素:di…

CSS魔法（三）浮动、相对定位、绝对定位

浮动为何需要浮动? 浮动float最开始出现的意义是为了让文字环绕图片而已,但人们发现,如果想要三个块级元素并排显示,都给它们加个float来得会比较方便. 浮动问题? 为何要清除浮动? 很多情况下父盒子不方便给高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &l…

CSS浮动、绝对、相对定位

浮动 float:属性{ float:none; 默认值,对象,不漂浮 float:left; 文本流向对象的右边 float:right; }; 清除浮动 clear:属性{ clear:none; 允许对象两遍都可以浮动 clear:left; 不允许左边有浮动 clear:right; 不允许右边有浮动 clear:both; 两遍都不允许有浮动 }; 定位 position:属性{ position:static; 静态定位 position:fixed; 固定定位 po…

HTML 学习笔记 CSS样式（相对定位绝对定位）

CSS相对定位设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定位,他将出现在她所在的位置上然后可以通过设置垂直或者水平位置让这个元素相对于他的起点进行移动. 如果将top 设置为20px 那么框的位置就在顶部下方20px的地方如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动. #box_relative…

CSS浮动属性Float介绍

#cnblogs_post_body h6 {font-size: 16px;font-weight: bold;} 什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样.浮动的元素仍然是网页流的一部分.这与使用绝对定位的页面元素相比是一个明显的不同.绝对定位的页面元素被从网页流里面移除了,就像印刷布局里…

CSS浮动属性Float到底什么怎么回事，下面详细解释一下

float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样.浮动的元素仍然是网页流的一部分.这与使用绝对定位的页面元素相比是一个明显的不同.绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样.绝对定位的元素不会影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着. 像这样在一个元素上用CSS设置浮动:…

CSS浮动属性Float详解

什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样.浮动的元素仍然是网页流的一部分.这与使用绝对定位的页面元素相比是一个明显的不同.绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样.绝对定位的元素不会影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着. 像这样在…

第3天：CSS浮动、定位、表格、表单总结

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear…

【CSS浮动、绝对、相对定位】的更多相关文章