CSS 浮动

来源：互联网发布：mac版软件下载工具编辑：程序博客网时间：2024/06/11 03:24

参考：CSS

浮动

1）可以看出，即使 div1 的宽度很小，页面中一行可以容下 div1 和 div2，div2 也不会排
在 div1 后边，因为 div 元素是块级元素，独占一行的。
2）如何在一行显示多个 div 元素
3）显然默认的标准流已经无法满足需求，这就要用到浮动。浮动可以理解为让某个 div
元素（或者其他块级元素）脱离标准流，漂浮在标准流之上。
4）例如，假设上图中的 div2 浮动，那么它将脱离标准流，但 div1、div3、div4 仍然在标
准流当中，所以 div3 会自动向上移动，占据 div2 的位置，重新组成一个流。如图：

这里写图片描述

从图中可以看出，由于对 div2 设置浮动，因此它不再属于标准流，div3 自动上
移顶替 div2 的位置，div1、div3、div4 依次排列，成为一个新的流。又因为浮
动是漂浮在标准流之上的，因此 div2 挡住了一部分 div3，div3 看起来变“矮”
了。
5）浮动的设置方法：
float:left;
float:right;
6）我不想标准流中的元素受到浮动的影响怎么办？
clear:both;
none:默认值。允许两边都可以有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:不允许有浮动对象
7）如果连续多个元素设置浮动呢？
结论：被设置浮动的元素会组成一个流，并且会横着紧挨着排队，直到父元素的
宽度不够才会换一行排列。

这里写图片描述

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8" /><title>第四章 用CSS给网页装潢[6] -浮动</title><style type="text/css">#div1 {    width:200px;    height:100px;    background:#33FFFF;    float:left;}#div2 {    width:400px;    height:50px;    background:#99CC33;    float:left;}#div3 {    width:150px;    height:150px;    background:#CC33CC;    float:left;    /*        清除右浮动    */}#div4 {    width:350px;    height:360px;    background:#999966;    float:left;}#div5 {    width:400px;    height:50px;    background:#33FFFF;    float:left;}</style></head><body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div><div id="div5">div5</div></body></html>

阅读全文

0 0