使用float浮动元素

先观察不浮动的情况

为将要浮动的元素设置一个宽度,让其不是占据整行

使用float属性让其浮动到右边

总结:当一个元素浮动之后,其会从正常的流中被忽略,块级元素会直接穿过它,不会进行换行,但是内联元素在遇到它时会围绕着它进行布局,值得注意的是,这里浮动的元素是写在不动的段落之前的,但是从视觉上来看,其是在它之后的,这是我们设置其靠右浮动的缘故

让左边段落,和右边的文章完全分为两栏,而不是底部超出环绕

可以看到,我们通过设置固定区域的右外边距,来让这两个区域完全被划分开,顺便通过这个举动,让边界更加分明
这个块元素被右边的浮动元素遮挡住了,因为它完全无视浮动元素的存在,我们来解决这个问题
通过设置clear属性,我们让这个元素的右边不允许有浮动内容,元素就自动被放置到浮动内容下方了

冻结布局

可以看到,无论浏览器怎么调整,这两个区域的大小都固定不变

凝胶布局

凝胶布局在冻结布局的基础上设置了左右外边距为auto,其依然锁定页面中内容区的宽度,不过会将它在浏览器中居中