当前位置：首页 > news >正文

（九）浮动的性质（1）

news 2026/7/24 15:44:23

1、浮动的元素脱标

标准流元素是区分行、块。
我们知道了浮动元素是脱离标准流的，那么脱离标准流后，浮动元素有哪些特性？
答：浮动元素，脱离标准流后，既可以设置宽度和高度，也可以实现并排显示，不区分元素状态，也就是不区分行内元素和块级元素。

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}div{width:200px;height:200px;border:1px solid red;}div p{width:100px;height:100px;background:purple;}div span{width:100px;height:100px;background:orange;}</style></head><body><div><p>我是p标签</p><span>span标签</span></div></body>

p标签和span标签都设置了宽度和高度，但是由于元素类型的限制，span标签没有宽度和高度。

div内部元素浮动之后

div p{width:100px;height:100px;background:purple;float:left;}div span{width:100px;height:100px;background:orange;float:left;}

需要注意的是，兄弟元素如果有一个浮动了，剩下必须都要浮动。
如果此时p标签和span标签都没有设置宽度和高度，元素的宽度会被内容撑宽，不会自动撑满父盒子。

div p{background:purple;float:left;}div span{background:orange;float:left;}

2、依次贴边

如果父盒子的宽度不足以存下所有的子盒子，存放不下的会自动向前寻找，直到空余位置能够存放，从而进行贴边显示。

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}div{width:400px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:left;}div p.par1{height:250px;background:green;}div p.par2{height:200px;background:blue;}div p.par3{background:yellow;}div p.par4{width:300px;background:cyan;}</style></head><body><div><pclass="par1">1</p><pclass="par2">2</p><pclass="par3">3</p><pclass="par4">4</p></div></body>

如果父盒子的宽度不够，子盒子会依次贴边，但是如果前面元素中有空隙，当前需要贴边的元素不会钻空，不会出现钻空的现象，而之会查询剩余宽度实现依次贴边。

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}div{width:600px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:left;}div p.par1{height:250px;background:green;}div p.par2{width:330px;background:blue;}div p.par3{height:200px;background:yellow;}div p.par4{width:300px;background:cyan;}</style></head><body><div><pclass="par1">1</p><pclass="par2">2</p><pclass="par3">3</p><pclass="par4">4</p></div></body>

如果某一个子盒子的宽度大于了父盒子，会有溢出状态。

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}div{width:600px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:left;}div p.par1{height:250px;background:green;}div p.par2{width:330px;background:blue;}div p.par3{height:200px;background:yellow;}div p.par4{width:650px;background:cyan;}</style></head><body><div><pclass="par1">1</p><pclass="par2">2</p><pclass="par3">3</p><pclass="par4">4</p></div></body>

向右贴边的原理和向左相同，也是按照先后顺序进行贴边。

<style>*{margin:0;padding:0;}div{width:600px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:right;}div p.par1{height:250px;background:green;}div p.par2{width:100px;background:blue;}div p.par3{height:200px;background:yellow;}div p.par4{width:100px;background:cyan;}</style></head><body><div><pclass="par1">1</p><pclass="par2">2</p><pclass="par3">3</p><pclass="par4">4</p></div></body>

3、浮动依次贴边练习

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}.outer{height:440px;width:940px;padding:10px;border:2px solid #000;margin:10pxauto;}.outer div{float:left;}.outer.box1{height:260px;width:300px;background:pink;}.outer.box2{height:260px;width:240px;background:cyan;}.outer.s_box{height:130px;width:200px;}.outer.box3{background:yellowgreen;}.outer.box4{background:greenyellow;}.outer.box7{height:180px;width:300px;background:blueviolet;}.outer.s_box2{height:180px;width:160px;}.outer.box5{background:purple;}.outer.box6{background:palegreen;}</style></head><body><divclass="outer"><divclass="box1"></div><divclass="box2"></div><divclass="s_box box3"></div><divclass="s_box box4"></div><divclass="s_box box4"></div><divclass="s_box box3"></div><divclass="box7"></div><divclass="s_box2 box5"></div><divclass="s_box2 box6"></div><divclass="s_box2 box5"></div><divclass="s_box2 box6"></div></div></body></html>