CSS 中浮动的使用

float
  none 正常显示
  left 左浮动
  right 右浮动
clear
  none
允许两边浮动
  left 不允许左边浮动
  right 不允许右边浮动
  both 不允许两边浮动


 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>CSS 中浮动的使用</title>
6 <style type="text/css">
7 .div1{
8 background-color:#0F0;
9 width:200px;
10 height:200px;
11 float:left;
12 }
13 .div2{
14 background-color:#0FF;
15 width:200px;
16 height:200px;
17 float:left;
18 }
19 .div3{
20 background-color:#000;
21 width:200px;
22 height:200px;
23 float:left;
24 }
25 .div4{
26 background-color:#FF0;
27 width:200px;
28 height:200px;
29 float:left;
30 }
31 </style>
32 </head>
33 <body>
34 <div class="div1"></div>
35 <div class="div2"></div>
36 <div class="div3"></div>
37 <div class="div4"></div>
38 </body>
39 </html>

时间: 2024-12-16 14:56:06

CSS 中浮动的使用的相关文章

关于CSS中浮动和定位问题的老生长谈

1 盒子模型 关于盒子模型的知识,想必大家都是非常熟悉的,是个被嚼碎了的话题,盒子概念的理解很简单,但是深入的理解W3C盒子模型和IE的盒子模型是需要费点心思的,特别是对于应用盒子模型做到网页元素的精确排版布局,也是一项重大的挑战. 1.1 W3C的盒子模型 标准的W3C盒子模型的范围包括有margin border padding content,重要的是,这里的content部分不包括border和padding,盒子的height和width是指content部分的宽高. 1.2 IE盒子

CSS中浮动的使用

CSS有两个性质 第一个是 :继承性 第二个是:层叠性: 选择器的一种选择能力,谁的权重大就选谁 { 里面分两种情况: 分别是 选中和没选中. 1.选不中的情况下,走继承性,(font,color,text都可以继承)继承性的权重为0 有多个父级都设置了这样的样式,走就近原则 2.选中了的情况下:得考虑三种情况 (a:权重问题,权重大,就选谁的样式: b:权重相同,谁在后选择谁: c:纯标签和类(class)没有可比性的,纯类(class)也没法和id进行比较. } 标准文档流 浏览器的排版是根

关于css中浮动float的最好理解!

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div style="border:3px solid silver; width:300px;"> <div id="container" style=&

详细解读css中的浮动以及清除浮动的方法

对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮动(本文将涉及到多种清除浮动的方法) 博客正文:   1.css块级元素讲解 常见的块级元素主要有以下几种:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<addr

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

CSS中的浮动、高度塌陷以及清楚浮动

一.CSS浮动 浮动(float)的框可以左右移动,直至它的外边缘碰到包含框或另一个浮动框的外边缘.浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级元素的布局而只会影响内联元素(通常是文本)的排列,文档中的普通流就表现得如同浮动框不存在一样.当浮动框高度超出包含框的时候,就会出现包含框不会自动升高来闭合浮动元素("高度塌陷"现象). <!DOCTYPE html> <html> <head> <style type="t

css中的浮动

在写程序的过程中经常会遇到这样的问题:希望某一个块或者元素到我指定的区域.这就涉及到定位和浮动的问题,下面我将详细说明css中的浮动. 一.浮动(float)------- 正常文档流中:块级元素从上到下依次排列,内嵌元素从左到右依次排列. 浮动:顾名思义,指元素从正常文档流中脱离出来,按照我们的想法而使元素达到指定的区域位置的功能. 1.浮动的对象:css中我们可以浮动任何元素,包括段落.列表.div.图像等. 2.浮动的功能,浮动是基于css的现代web设计用到的主要功能之一: a.它可以用

辛星彻底帮您解决CSS中的浮动问题

浮动,是CSS布局中必须经过的一道坎,如果不熟悉浮动,那么CSS的布局就如同空中楼阁,而谈到浮动,更多的是和div相结合,div是一个块级元素,这个我前面的博文有介绍,如果大家喜欢我的风格,可以搜索下. 下面我们进入正题,所谓浮动,可以用css的属性float来定义,比如float:left就是向左浮动,float:right就是向右浮动,我们先看一个不浮动的例子把,首先是这个html文件,这个文件我们是一直都不会动它了,它的内容如下: <html> <head> <link