学习css布局

学习了浮动布局，有了巨大收获
学习了浮动布局的原理和使用方法。通过设置元素的 float 属性为 left 或 right，可以让元素脱离正常的文档流，向左或向右浮动。浮动元素会影响周围元素的布局，需要使用清除浮动的方法来避免布局混乱。常见的清除浮动方法有使用 clear 属性、BFC（块级格式化上下文）等。例如，创建一个简单的两栏布局可以使用浮动元素实现。
2. 定位布局
掌握了不同定位方式的特点和应用场景。静态定位（position: static）是元素的默认定位方式，元素按照正常的文档流进行布局；相对定位（position: relative）会使元素相对于其正常位置进行偏移，偏移不会影响其他元素的布局；绝对定位（position: absolute）会使元素脱离文档流，相对于最近的已定位祖先元素进行定位；固定定位（position: fixed）会使元素相对于浏览器窗口进行定位，无论页面如何滚动，元素都会保持在固定位置；粘性定位（position: sticky）是相对定位和固定定位的混合，元素在滚动到某个位置之前是相对定位，滚动到该位置后变为固定定位。
3. 弹性布局（Flexbox）
初步了解了弹性布局的基本概念和使用方法。弹性布局是一种一维布局模型，通过将元素设置为弹性容器（display: flex 或 display: inline - flex），可以方便地控制其子元素的排列方式、对齐方式和空间分配。学会了使用 flex - direction、justify - content、align - items 等属性来实现不同的布局效果，如水平居中、垂直居中、两端对齐等。