css布局之浮动

xuhaidady 2015-12-15

 　　CSS布局中说到浮动，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动

框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

一float属性的定义和用法

       float属性：设置元素浮动

       可能的值：

       none 不浮动，在文档流内，默认

       left  左浮动，脱离文档流

       right 右浮动，脱离文档流

       inherit 规定应该从父元素继承 float属性的值。

(1)三个不浮动元素的图示和效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="background: peru;height: 200px;width: 300px;">
    a
</div>
<div style="width: 300px;background: palevioletred;height: 200px;">
    b
</div>
<div style="background: fuchsia;height: 200px; width: 300px">
    c
</div>
</body>
</html> 

css布局之浮动

(2)第一个元素向右浮动的图示和效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="background: peru;height: 200px;width: 300px;float: right">
    a
</div>
<div style="width: 300px;background: palevioletred;height: 200px;">
    b
</div>
<div style="background: fuchsia;height: 200px; width: 300px">
    c
</div>
</body>
</html>
 

css布局之浮动
 框a向右浮动分离文档流；框b占据框a原来的位置．

(3)设置三个元素均向左浮动的图示和效果：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="background: peru;height: 200px;width: 300px;float: left">
    a
</div>
<div style="width: 300px;background: palevioletred;height: 200px;float: left;">
    b
</div>
<div style="background: fuchsia;height: 200px;width: 300px;float: left">
    c
</div>
</body>
</html>
 
css布局之浮动
 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间．
xuhaidady

xuhaidady

相关推荐

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html实现用时间点来展示事件发生点来代替用table展示一条条数据，能够给人清晰、一目了然能够看清事情发生的过程，UI页面也显示的那么清晰。先来看看下面的效果：。无特殊定位，对象遵循HTML定位规则。absolute :将对象从文档流中拖出，使用 lef

drdrsky / 0评论 2020-06-13

css中的定位

left、top、right、bottom是相对于当前元素自身进行偏移，不能独自存在，必须配合定位元素进行使用。如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移。设置了sticky的元素，在屏幕范围时该元素的位置并不受定

ThikHome / 0评论 2020-06-05

CSS布局

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面的内容发生了变化，后面的内容位置也会随着发生变化。在标准流中，大部分标签是区分等级的，习惯将标签划分为几种常见的加载级别: 块级元素、行内元素、行内块级元素等。隐藏的

vavid / 0评论 2020-05-30

CSS定位

元素的定位属性主要包括定位模式和边偏移两部分。静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。在静态定位状态下，无法

CSSEIKOCS / 0评论 2020-05-19

CSS position定位

就比如在网页中的一些广告，无论你怎么滑动网页都无法隐藏掉广告，这就运用到我们强大的CSS定位。CSS定位的内容包括：position（位置）:relative（相对） / absolute（绝对）/static （默认）/sticky（粘性）/ fixed

xiaohuli / 0评论 2020-02-23

CSS---常用属性总结

6内联标签是不可以设置长宽的，有时候就得把内联标签变成块级标签或者块级内联标签，这就用到了display标签。。

nicepainkiller / 0评论 2020-02-20

css的相对定位和绝对定位

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。使用 display 属性改变生成的框的类型。这样的话，该框

葉無聞 / 0评论 2020-02-03

前端基础-css(2)

　　宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画。　　　　a、与其他行内元素并排；　　　　b、不能设置宽、高，默认的宽度，就是文字的宽度；　　　

wangjie / 0评论 2019-11-30

CSS 中的定位

它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。元素框从文档流完全删除，并相对于其包含块定位。文档流指的是元

AnyBisks / 0评论 2019-11-16

css定位瞄点透明相关知识

position 定位属性，检索对象的定位方式；当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

CaiKanXP / 0评论 2019-11-09

CSS 常用布局在小程序中的应用

我们其他的布局实现方式，都是基于正常的文档流来进行的。默认的文档流，确保在没有任何css样式的时候，还能够正确的渲染和显示内容。行内元素的height width与内容一致。正常布局流是一套在浏览器视口内放置、组织元素的系统。我们在传统的css布局当中，不

csscode / 0评论 2019-09-07

CSS 定位position

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。一切皆为

aiolos / 0评论 2018-09-27

CSS浮动float

block元素无视float元素啥意思呢，就是A和B两个block(块级)元素在排队买东西，A在前面，那么B只能遵守规则突然A膨胀了，飘了，然后B就无视A,前进一步跑到A下面。but，如果此时A没有浮动，而B浮动了，此时他只漂浮在自己的位置上方。从俯视图看

陈浩 / 0评论 2019-07-01

重塑你的CSS世界观——浮动魔鬼float

为什么要写《重塑你的CSS世界观》系列文章由于从工作到现在，我的主要工作都是写JavaScript，几乎没怎么碰CSS，通常都是别人写好界面，然后我来开发JavaScript逻辑代码，这导致了严重的偏科，CSS弱得很，所以我决定要重新学习CSS，从打好CS

Phoebe的学习天地 / 0评论 2019-07-01

BFC，包含块，文档流，浮动，定位是个啥关系---CSS视觉格式化模型

CSS视觉格式化模型浏览器在解析渲染我们所写的html内容，顺序渲染。如果不特殊指定，浏览器会默认当前的HTML渲染是按文档流模式。盒模型是css渲染的时候抽象于html标签在画布所占有区域，由CSS引擎根据文档中的内容所创建。盒模型是有两种标准的，一个是

juzhengqian0 / 0评论 2019-06-30

前端常见知识点汇总（面试）-HTML和CSS部分

block默认宽度100%，设置absolute，变成包裹内容二、position属性1、static 没有定位，元素出现在正常的文档流中，默认属性。DOM Tree中一些节点不会被放入到Render Tree中。

yibawuqing / 0评论 2019-06-30

【芝士整理】CSS基础图谱

选择器注意点属性选择器[attr^=value] - 开头或全等[attr$=value] - 结尾或全等[attr*=value] - 包含值[attr~=value] - 字符串包含选择器组A > B - 直接子节点A + B - 下一个兄弟节点

沉着前进 / 0评论 2019-06-29

【学习笔记】CSS深入理解之absolute

《张鑫旭的CSS深入理解之absolute》学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。去float化 - float属性将会失效跟随性 - 根据原有位置脱离文档流放置无依赖绝对定位元素 —— 即未手动定位的绝对定位元素。无依赖绝对定位元

yezi / 0评论 2019-06-29

CSS 定位position

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。一切皆为

懵懂听风雨 / 0评论 2018-09-27

CSS浮动原理及清除浮动方法

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，且脱离文档流。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到

haozitwwwcssscn / 0评论 2018-02-02

CSS 盒子模型及 float 和 position

CSS和模型CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，包括 外边距，边框，填充，内容物。指的是西方语言文本从左向右、从上向下显示，这也是传统 HTML 文档的文本布局。一个元素的默认高度是由其内容确定，可以对任何块级元素设置显示高度。pos

coulder / 0评论 2019-06-28

关于CSS的那些事

CSS简介想要制作出好看又高大上的网页，除了编写好HTML文件外，CSS的编写也必不可少。CSS的英文全称是Cascading Style Sheets，即层叠样式表。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。下面我

impress / 0评论 2019-06-28

后端工程师必知必会的前端 css 知识

后端工程师虽然大部分工作都是跟服务器缓存数据库打交道，但有时也需要写一些前端代码。Js对于后端小伙伴来说不算难点，能够顺手的使用，涉及到 css 就会有点懵逼了。后台开发一般不会用到太难的前端技巧，能够在完成正确布局的基础上，再稍微做一些美化，就已经够用了

jjjjjj / 0评论 2019-06-28

css布局基础总结

前端css布局知识繁杂，实现方式多种多样。想写出高效、合理的布局，必须以深厚的css基础为前提。为了方便记忆和复习，将css布局要点记录如下。内容较多，应用方面说的不太详细，但都是很实用的点。所谓布局，就是指将元素设置为我们想要的大小，放置于我们想要的位置

沉着前进 / 0评论 2019-06-28

天坑，CSS之定位Position（六分之五）

Position定位个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute，当年可是被虐的不轻。当然了，现在爱上了这个属性，谁用谁知道。position属性position是CSS的一个属性，地位较高，也是我们重点要说的一个属性。

葉無聞 / 0评论 2019-06-28

CSS定位

给定一个div取名sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：。也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。此时sub2将获得sub1的位置，它的文档流不再基于sub1，而是

SuiKaSan的自学室 / 0评论 2015-07-17

css定位(positioning)

CSS 定位 属性允许你对元素进行定位。CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。另一方面，CSS1 中首次提出了浮动，它以 Netscape 在

xiaohuli / 0评论 2015-07-13

CSS 3-浮动、定位

文档流文档流是一种默认定位方式，在文档流中元素框的位置由元素在html中的位置决定，文档流中元素的position属性为默认的static或继承来的static并按照普通流定位。块级元素独占一行，自上而下排列；内联元素从左到右排列。让元素脱离文档流有三种方

葉無聞 / 0评论 2019-06-27

CSS 布局模型

Flow标准文档流方式，元素从上至下，从左至右！是默认的网页布局方式。特点块状元素占据单独的一行，从上至下排列内联元素会从左至右排列Float网页元素可通过设置float属性值浮动，利用浮动特性布局。position: staticposition 默认值

葉無聞 / 0评论 2019-06-27

CSS绝对定位和浮动的区别和运用

一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。您可以使用display 属性改变生成的框的类型。

dazhifu / 0评论 2015-03-30

CSS中宽度与高度

div的高度div由的高度是由它里面的字体乘以字体建议的行高确定，跟这个字体大小没有关系(不同字体相同字体大小，会影响div的高度。)如过明确告诉浏览器行高，div高度就是行高。用此方法受制于字体，所以不能用这方法实现两端对齐。

realitycss / 0评论 2019-06-27

css绝对位置，相对位置

层级关系为：<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————- position:relative

王景迁 / 0评论 2014-12-25

css定位总结

position:static;//position的默认值，表示元素按照标准文档流定位，设置left，top，right，bottom，z-index无效。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。position:fix

wangnantjobj / 0评论 2019-06-27

CSS中的绝对定位与相对定位

层级关系为：<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————- position:relative

opspider / 0评论 2014-08-28

文档流&文字&CSS常用命令

文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排。注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用css属性。}脱离文档流类似悬浮

realitycss / 0评论 2019-06-26

CSS margin合并问题

在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。必须是处于常规文档流的块级盒子，并且处于同一个BFC当中。相邻元素可以在其中一个元素外面包一层div，并设置任何能触发B

王为仁 / 0评论 2019-06-26

CSS详细解读定位

一 前言CSS定位是CSS布局只能够重要的一环。本篇文章带你解读定位属性，可以让你更加深入的理解定位带来的一些特性，熟练使用CSS布局。二 正文1.文档流布局的概念将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。每个非浮动块级元

realitycss / 0评论 2019-06-26

CSS浮动其实很简单

浮动必会脱离文档流浮动会失去块级作用浮动只在自己所在位置那行向左或者向右浮动请仔细理解上面这三句话，下面我们来验证。实验1. 最基本测验：<!实验1结果分析：因为div为块标签，而且处于同一文档流当中，固会向下排列。

yezi / 0评论 2019-06-26

CSS定位

一般使用margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“距离”。只要不是float和绝对定位

葉無聞 / 0评论 2019-06-26

CSS进阶指南

在网络上查找最好的地方当然是CSS官网文档，不过英文版的官方文档将很大一部分人拒之门外，而中文版的博客上五花八门的只是零散又不权威，很容易将人带入歧途，浪费时间。笔者写这篇文章，摘录博客上总结的CSS知识，同时参考CSS官方文档，尽力保证其正确性。希望能节

尚衍亮 / 0评论 2019-06-26

CSS 定位属性

CSS布局的核心是position属性，对元素盒子应用这个熟悉，可以相对于它在常规文档流中的位置重新定位。position属性有4个值：static、relative、absolute、fixed、默认值为static. 只有将元素的position属性设

qianxiaona / 0评论 2014-01-08

CSS 绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。这一点与相对

hellowzm / 0评论 2013-08-13

css中clear:both

CSS中clear:both;可以终结在出现他之前的浮动CSS中clear:both;可以终结在出现他之前的浮动。对应的脚本特性为clear. 主要是用在div套div的结构中。如果内div是浮动的，一般都需要clear浮动，不然的话内div会超出外div

张大晴 / 0评论 2013-07-23

css的定位与文档流

谈到CSS的定位机制时都会提到一个关键词“文档流”。将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素,即为文档流。浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。当一个元素

yyNet0 / 0评论 2013-06-28

CSS布局说——可能是最全的

前言现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。其实，我们可能经常在聊组件化，咋地咋地。所以，我们需要在分清楚组件之前，先来分清楚布局。正文或许对于

libowen0 / 0评论 2019-06-25

CSS 笔记

important 的声明比没有使用的优先级更高选择器优先级ID > 类 | 伪类 | 属性 > 元素 | 伪元素 > 通配符组合子 和 否定伪类 对特异性没有影响。如果四象值未定义，那么依然处于文档流。否则其行为与相对定位相同。设定为

nicepainkiller / 0评论 2019-06-21

CSS中盒子模型，定位，浮动等相关问题

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现

SuiKaSan的自学室 / 0评论 2012-09-17

html+css技巧分享和IE6典型BUG分析（重温一下）

（元素根据自己的display类型，长宽，等属性顺序排列在z-index：0这一层的。）2， 浮动：就是通过float：left；float：right；来控制元素在同层里的左浮和右浮。Float，会改变正常的文档流的排列但是他仍然还是在z-index：0

张大晴 / 0评论 2012-06-04

css 定位

谈谈定位CSS 定位机制：CSS 有三种基本的定位机制：普通流、浮动和绝对定位。（元素根据自己的display类型，长宽，等属性顺序排列在z-index：0这一层的。）2， 浮动：就是通过float：left；float：right；来控制元素在同层里的左

LadyZhong / 0评论 2012-06-01