本文介绍了CSS布局中的四大布局：流式布局、浮动布局、盒模型布局和flex布局。流式布局是最简单的布局方式，浮动布局用于元素的字围效果，盒模型布局涉及元素的尺寸和位置调整。CSS3引入的flex布局提供了更灵活的布局解决方案，解决了浮动布局的一些问题。文章详细讲解了各个布局的特点、使用场景及关键属性，并提到了布局中遇到的问题及其解决方案，如浮动造成的父元素高度塌陷和margin塌陷问题。
布局（四大布局）
什么是布局？就是把一个个盒子放到合适的位置。
CSS2.0中有三大布局——1、流式布局。2、浮动布局。3、层布局。
CSS3.0中新增一个flex布局。
第一大布局：流式布局
最简单的布局方案，也是默认布局方案。其实就是按照标准文档流进行布局。平时开发项目时，只是用流式布局往往无法完成项目。
特点：1、块级标签独占一行，行内、行内块可以并排显示。
2、盒子摆放是从上到下进行摆放。
第二大布局：浮动布局
初衷，为了实现字围效果，也就是一堆文字围绕着一张图片。
特点，浮动会半脱离标准文档流。如果脱离标准文档流，那么这个文档流的规则就不再适用。完全脱离文档流的话，那么文字就会跑到浮动元素的下方，会被覆盖掉。而使用float并不会让文字跑到元素下方， 而是让文字围绕元素，所以是半脱离。
一般使用浮动将块级元素并排显示。为什么要用浮动，而不是用inline-block？
使用inline-block虽然可以将块级元素并排显示，但是如果代码上出现换行，会导致元素之间出现一个小间隔，这就导致如果几个并排元素原本宽度相加为100%，但却因为出现了间隔，硬生生让别的元素挤到了下一行。（这个间隔的大小是根据font-size来计算出来的，如果font-size为0，那么这个间隔也就没了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
width: 800px;
height: 400px;
overflow-x: hidden;
overflow-y: auto;
}
.img1 {
float: left;
}
.theDivInline {
width: 800px;
height: 400px;
background-color: #ff0;
}
.theDivInline .p1 {
width: 30%;
background-color: red;
display: inline-block;
}
.theDivInline .p2 {
width: 70%;
background-color: blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">
<!-- 这是一个普通的文字围绕效果 -->
<img class="img1" src="./img/4.jpg" alt="">
<p>新华社北京3月14日电（记者高敬）受较强冷空气影响，3月14日至16日，我国长江以北地区将先后出现大风降温天气，部分地区将有扬沙或浮尘天气。但在冷空气到来前，华北中南部、东北地区中南部等地大气扩散条件较差，仍有轻至中度霾。中央气象台预计，14日至16日，新疆北部、西北地区中东部、内蒙古、华北、东北地区等地气温下降4至6℃，部分地区达10至12℃，内蒙古东部局地可超过16℃。内蒙古、东北地区、华北、西北地区中东部等地有4至7级风，部分地区阵风8至10级。受大风影响，新疆东部和南疆盆地、内蒙古、甘肃河西、宁夏中北部等地的部分地区有扬沙或浮尘天气，其中，新疆南疆盆地、内蒙古西部、甘肃西部等地局地有沙尘暴。目前，京津冀及周边地区大气污染已经持续数日，此次污染程度重、持续时间长、影响范围大。记者从生态环境部了解到，已有多个城市发布重污染天气预警。14日，华北中南部、东北地区中南部等地大气扩散条件较差，仍然有轻至中度霾。15日起，受冷空气影响，霾天气将自北向南减弱消散。未来几天，全国范围内的雨雪天气将明显增多，新疆北部、内蒙古东北部、黑龙江西部等地将有中到大雪，局地暴雪；江淮西部、江汉东部、江南北部、西南地区东南部等地部分地区有中到大雨，其中，安徽南部、湖北东部、江西北部等地部分地区有暴雨。（完）
</p>
</div>
<div class="theDivInline">
<h1>这个是p不换行，那就没有间隙</h1>
<!-- 这里为什么要换行？因为这是inline-block的通病，代码换行会导致元素之间出现间隙，从而导致明明两个元素宽度相加为100%，却让元素硬生生换了个行 -->
<p class="p1">第一个p</p><p class="p2">第二个p</p>
</div>
<div class="theDivInline">
最低0.47元/天 解锁文章
1213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
