等。请看以下例子；
当然也可以通过添加display:block将行内元素改为块级元素，通过display:inline将块级元素改为行内元素，通过display:inline-block改为行内块元素（同时拥有行内和块属性）。例如；
二. 浮动布局
浮动布局是通过CSS的float属性来实现的。当对一个元素应用float属性时，该元素会脱离正常的文档流，并向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。浮动元素会影响其后的元素，但不会影响之前的元素。例如给粉色盒子加了float:left;向左浮动（上下左右都可以设置），使得粉色盒子脱离了正常的文档流，不再占有原文档流位置，所以下面的蓝色盒子会顶上原粉色盒子的位置。
常用于文字环绕效果：
因为浮动的元素会脱离文档流，父盒子失去高度，也就是会发生覆盖现象，这就需要清除浮动（让父盒子有高度）。
给浮动元素添加高度。
在浮动元素最末尾添加子容器，在子容器上添加clear:both用来清除浮动。
添加伪元素清除浮动（如下）。
css
代码解读
复制代码
xxx::after {
content: "";
clear: both;
display: block;
}
三. 定位布局
定位可以将元素从文档流中取出，即不占据原有的文档流位置。凡是加了定位属性（position:）的元素，就会脱离原有的文档流位置 （称为 脱标 ）。包括以下几个定位；
相对定位：position:relative; 以该容器自身原本的文档流的位置作为参考，将容器移动
绝对定位：position: absolute; 以拥有position属性的父容器作为参考（ 子绝父相 ）
以上例子，由于父容器box设置了position:relative;相对定位，所以box就会相对于原来的位置根据设置的left:70px;和top:80px;移动，而子容器child设置了position:position;绝对定位，则会去找父容器中是否有position属性，只要含position属性即以它为参照移动left:60px;和top:50px;,则结果显示如下图所示；
固定定位：position:fixed;定义了弹性子项在主轴上的对齐方式n：fixed; 以浏览器的可视窗口为参考定位。固定定位的元素也会脱离文档流，且其位置不会随着页面的滚动而改变。
粘性定位：position: sticky; 以浏览器的可视窗口为参考（在窗口内是可以滚动的位置的）。滚动到特定位置之前表现为相对定位，滚动到特定位置时则表现为固定定位。
如下，想要在右侧也放上一个如左图一样的优惠券领取。
结构为一个box容器里面装了一张图片以及一个优惠券（ticket盒子），想让优惠券显示在图片的右下角就可以用到定位了，html结构是
css
代码解读
复制代码
￥10
领取
所以我们只需要给父容器box设置一个相对定位，给ticket设置一个绝对定位，再设置偏移值即可，如下；
四. 弹性布局（flex布局）
display:flex;将一个元素定义为弹性盒子
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;定义盒子里面的子项主轴（默认x轴）上的对齐方式，当子项总宽度小于弹性盒子宽度时生效。
align-items: stretch | flex-start | flex-end | center | baseline;定义了弹性子项在交叉轴上的对齐方式
align-items:baseline 将所有直接子元素沿着它们的基线对齐（如下）。
flex-direction: x || y;定义主轴的方向（默认为x轴）
flex-wrap: nowrap | wrap | wrap-reverse;定义如果一行放不下所有弹性子项，是否换行（默认为不换行），与 wrap 值相比，wrap-reverse 会使得新行在当前行的上方开始堆叠，而不是下方（反向堆叠）。
-
align-content: stretch | flex-start | flex-end | center | space-between | space-around;当有 多行 弹性子项时，定义了这些行在交叉轴（默认垂直）上的对齐方式
-
flex:1 定义弹性子项的放大比例，即如果存在剩余空间，子项应该放大的比例
五. 总结
盒模型：描述了HTML元素如何在其周围分配空间，包括内容、内边距、边框和外边距。
文档流：指HTML页面中元素默认的排列方式，从左到右，从上到下。块级元素独占一行，行内元素占一行内的一部分。
浮动布局：通过float属性实现，使元素脱离正常文档流，向左或向右移动，不过会影响后续元素。
定位布局：通过position属性将元素从文档流中取出，包括相对定位、绝对定位、固定定位和粘性定位。
弹性布局（Flex布局） ：通过display: flex;属性定义弹性盒子，以及相关属性如justify-content, align-items, flex-direction, flex-wrap, align-content, flex等，实现灵活、响应式的布局。
