本文主要讲解如何实现CSS对等元素的浮动。感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“如何实现CSS对等元素的浮动”！
1.在同一水平线上浮动
(1)使块级元素显示在同一行中(要显示在同一行中的所有元素都应浮动)
div class=' box 1 ' box 1/div class=' box 2 ' box 2/div class=' box 3 ' box 3/div . box 1 {
border:2pxsolidred
宽度：40 px；
高度：100 px；
float:left
}
. box2{
border:6pxsolidblack
宽度width:100px
高度：40 px；
float:left
}
. box3{
border:12pxsolidblue
宽度width:100px
高度：300 px；
float:left
}
(2)使行中的元素支持宽度和高度。
spanclass='box1'/span.box1{
border:2pxsolidred
宽度：40 px；
高度：100 px；
float:left
}
3.当没有宽度和高度时，宽度和高度被内容扩展；
spanclass='box1'hello/span
. box1{
border:2pxsolidredfloat:left
}
4.如果一个元素增加了浮动，它就会从标准的文档流中分离出来(文档流指的是对象在文档中占据的位置)，没有浮动的元素会被发现向后覆盖它(向后浮动)，这与前面的元素无关。
div class=' box 1 '/div div class=' box 2 '/div div class=' box 3 '/div . box 1 { border :1 pxsolidred；
宽度：40 px；
高度：100 px；
浮动：左侧；
}
. box2 { border:4pxsolidblue
宽度width:140px
高度：40 px；
float:left
}
. box3 { border:8pxsolidgray
宽度width:200px
高度：200 px；
}
5.如果一个元素是浮动的，它首先脱离标准流，按照浮动方向浮动，直到停在前一个浮动元素的边界，或者因为上层放不下元素而掉下来，在下一行；
divclass='box1'/div
divclass='box2'/div
div class=' box 3 '/div . box 1 { border :11 pxsolidred；
宽度：40 px；
高度：100 px；
右浮动：
}
. box2 { border:4pxsolidblue
宽度width:140px
高度：40 px；
float:left
}
. box3 { border:8pxsolidgray
宽度width:200px
高度：200 px；
}
6.当一个元素A浮动在一个没有浮动的元素B上时，会挤出B的内容原来的位置，甚至会挤出。
divclass='box1'box1/div
divclass='box2'box2/div
divclass='box3'box3/div
. box1{
border:11pxsolidred
宽度：40 px；
高度：100 px；
}
. box2{
border:4pxsolidblue
宽度：60 px；
高度：100 px；float:left
}
. box3{
border:8pxsolidgray
宽度width:200px
高度：200 px；
}
分析时注意，如果一个元素浮动，只看它前面的元素，前面的元素也浮动，就会并排显示；如果前一个元素没有浮动，相对位置将保持不变。
至此，相信大家对“如何实现CSS元素的同级浮动”有了更深的理解，那么就来一个实操吧！这是网站。更多相关内容，可以去相关渠道查询，关注我们，继续学习！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/142060.html