今天我要介绍的知识点内容是在Java HTML中CSS的：浮动（页面布局）
经过前面几篇文章的学习我们认识到了HTML（文本标识）中的过渡动画（Transition）与变形(Transform），定位（position）以及其基本标签，今天，我将介绍在HTML CSS中非常重要的一块知识点类型：浮动（网页布局），一切的软件内的设计，都有页面布局，相当于功力将大成，而有页面布局设计，才使网站以及各大平台的大厅区域逐渐美观精致，它的存在，好似将一座平凡的小土屋逐渐“更新”为雅致美观且大方的别墅，而页面布局的不断“换新”，正映射着这日新月异的时代，蓬勃发展的时代在不断变化，革新。
-
两栏布局
两栏布局是页面被分成左右两个主要区域。
一个常见的例子是左侧为导航栏，右侧为主要内容区。
试做：模拟以上两栏布局为例：
场景模拟1：
属性值：
.aa{width: 25%;height: 300px;background-color: brown;float: left;} .bb{width: 25%;height: 300px;background-color: yellow;float: right; }生效代码块：
</head><body><div><div class="aa"></div><div class="bb"></div><div style="clear: both;"></div></div><h1>suck for you</h1></body>
</html>注解："clear:both"是消除左右两边浮动浮动
最终呈现：消除浮动以及两栏效果见下图：
加入效果前：
加入效果后：
-
三栏布局
三栏布局增加了中间的内容区，两边可以作为侧边栏使用。
这种布局适合内容较多且需要分类展示的网页。
试做：模拟以上三栏布局为例：
场景模拟1.1：
属性值：
.aa{width: 25%;height: 300px;background-color: brown;float: left;} .bb{width: 25%;height: 300px;background-color: yellow;float: right; }.cc{width: 25%;height: 300px;background-color: black;float: left;}生效代码块：
</head><body><div><div class="aa"></div><div class="bb"></div><div class="cc"></div><div style="clear: both;"></div></div><h1>suck for you</h1></body>
</html>最终呈现：三栏布局效果见下图：
注：
HTML元素按照它们在HTML文档中的顺序从上到下、从左到右依次排列的方式。
每个块级元素默认占据一整行，而内联元素则在同一行内连续排列直到没有足够的空间为止。
通过改变元素的display、position等属性，我们可以调整元素的位置和排列方式，但这些操作 都是基于标准文档流进行的。
-
display 属性：
display： 属性用于定义元素生成的框的类型：
block： 元素前后换行显示，宽度默认占满父容器。
inline： 元素不换行显示，只占用其内容所需的空间。
inline-block：元素不会独占一行，但是它可以设置高度和宽度。
none：元素不生成任何框，即该元素不会显示。
-
核心属性值及用法
block（块级元素）
- 特点：独占一行，宽度默认撑满父容器，可设置宽高/边距。
例：
<div class="box">块级元素</div>
<style>.box { display: block; width: 200px; background: #f0f0f0;}
</style>常见标签：div、h1-h6、p
inline（行内元素）
- 特点：不换行，宽高由内容决定，不可设置垂直边距。
例：
<span class="text">行内元素</span>
<style>.text { display: inline; margin-right: 10px; /* 水平边距生效 */}
</style>常见标签：span、a
inline-block（行内块元素）
- 特点：兼具行内布局与块级特性，可设置宽高且不换行。
- 典型应用：水平导航栏；
例：
<ul class="nav"><li>首页</li><li>产品</li>
</ul>
<style>.nav li { display: inline-block; width: 100px; text-align: center;}
</style>none（隐藏元素）（一个朴实无华的 display:none 即可）
特点：元素不显示且不占用文档流空间。
-
float 属性:
float 属性用于指定一个元素应该向哪个方向“浮动”。它主要用于图像环绕文本效果或创建多列布局。
left 元素向左浮动。
right 元素向右浮动。
none 默认值，元素不会浮动
属性值：
.left {float: left;
}
.right {float: right;
}生效代码块：
<div class="top"><span class="left">命名区</span><span class="right">命名区<span><span style="clear: both;"></span>
<div>-
clear 属性:
clear:属性用于阻止父元素内的子元素环绕浮动元素。
left:不允许元素左边有浮动元素。
right:不允许元素右边有浮动元素。
both:不允许元素左右两边都有浮动元素。
none:默认值，允许元素四周有浮动元素。
clear: left;
- 作用：元素下移到左侧无浮动元素的位置。
- 适用场景：左侧有浮动元素时，强制换行。
例：
<style>.float-left { float: left; width: 100px;height: 100px;background: red;}.clear-left {clear: left; /* 清除左侧浮动影响 */background: blue;padding: 10px;}
</style>
<div class="float-left"></div>
<div class="clear-left">此内容在左侧浮动元素下显示</div>clear: right;
- 作用：元素下移到右侧无浮动元素的位置。
- 适用场景：右侧有浮动元素时，避免内容环绕。
例：
<style>.float-right { float: right; width: 100px;height: 100px;background: green;}.clear-right {clear: right; /* 清除右侧浮动影响 */background: yellow;padding: 10px;}
</style>
<div class="float-right"></div>
<div class="clear-right">此内容在右侧浮动元素下显示</div>clear: both;
- 作用：元素下移到左右两侧均无浮动元素的位置。
- 适用场景：需完全避开所有浮动元素时使用。
<style>.container {border: 1px solid black;overflow: auto; /* 替代清除浮动的另一种方法 */}.box {float: left;width: 100px;height: 100px;background: red;margin: 10px;}.clear-both {clear: both; /* 清除左右两侧浮动 */}
</style>
<div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="clear-both"></div> <!-- 强制父容器包含浮动 -->
</div>clear: none;
- 作用：默认值，允许元素与浮动元素相邻。
- 适用场景：无需清除浮动时的常规布局。
总结：
希望以上有关于浮动（页面布局）的知识点内容能对你带来一定的帮助，同时非常感谢各位大佬的点赞与支持，咱们下一篇不见不散。
