float(半浮动)

Posted startl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了float(半浮动)相关的知识,希望对你有一定的参考价值。

块级标签:<div><p><h1-h6><ul><ol><dl>

1.一个块级标签占一行

2.可以通过css设置其行高

内联标签:<a><imag><input><span><select><textarea>

宽度取决于文本的宽度

正常文档流:将元素(标签)在进行排版布局的时候按着从上到下 从左到右的顺序排版的一个布局流
脱离文档流:将元素从文档流中取出,进行覆盖,其他元素会按文档流中不存在该元素重新布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
background-color: #2eb1fc;
width:100px;
height:100px;

/*float:left;*/
}
.div2{
background-color:#1ecc86;
width:100px;
height:100px;
/*float:left;*/
float:right;
}
.div3{
background-color:#71a403;
width:200px;
height:200px;
/*clear:left; 不允许左边有float元素*/
clear:right;
}
  
    </style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>

技术图片




以上是关于float(半浮动)的主要内容,如果未能解决你的问题,请参考以下文章

Float浮动

将float标签放在kendoReact DatePicker中

第3天:CSS浮动定位表格表单总结

第九篇 float浮动

使用左上角的不透明框选择半功能字段

从片段着色器中的地形高程数据计算法线