元素设置float属性后,其后面的元素的位置问题
2024-08-26 19:01:52
分两种情况:
.content{
width:350px;
height:150px;
color:#fff;
}
.content1,.content2{
background-color: #00f;
}
.content2{
margin-top:10px;
}
.one{
background-color:#f00;
float: left; }
.two{
background-color: #3dfeca;
}
.content1 .one,
.content2 .one{
height:50px;
}
一,后面的元素是块级元素---block
<div class='content content1'>
<div class='one'>
the folowing element is block;
</div>
<div class='two'>
second div idv idv div div div div div div div div
</div>
</div>
如果给第一个class为one的设置了float,.two的div会占据.one div的位置,但是字不会重叠。.two中的字会跟在.one中字的后面排列出来如图1所示,(注意:如果.two的宽度不够大的话,字会被挤到下一行,如图2所示,)
图1 图2
二,后面的元素是行内元素--inline
如果后面的元素是行级元素的话,在给第一个元素设置float后,后一个元素不会占据前一个元素的位置。而是乖乖的跟在后面。例如:
<div class='content content2'>
<div class='one'>
the folowing element is inline;
</div>
<span class='two'>
inline element is span;there is other inline element such as a,i,b,em
</span>
</div>
最新文章
- 关于Android避免按钮重复点击事件
- TortoiseSVN-1.8.11 安装时弹出2503错误导致安装失败解决办法
- [codeforces 293]B. Distinct Paths
- asp.net core StaticFiles中间件修改wwwroot
- 10分钟轻松学会python turtle绘图
- geotrellis使用(三十五)Cesium加载geotrellis TMS瓦片
- OSI模型和TCP/IP协议族(一)
- [LeetCode] The Maze II 迷宫之二
- .Net Core的Log方式:Serilog+Kibana
- myql 格式化日期
- cygwin jdk11u
- dock容器操作命令
- OSWATCH安装
- vscode项目配置 vue-loader-webpack
- 函数的动态参数与命名空间 day10
- V-rep学习笔记:视觉传感器2
- python之字典【dict】
- anaconda 及python pip安装 类库等问题收集
- Ant教程
- MySQL数据源驱动报错