Web基础(从零开始)——CSS浮动布局

传统网页的布局方式：使用标准流让块级元素纵向排列，浮动让块级元素横向排列

1.普通流（标准流）：标签按照默认方式排列（块级元素独占一行，从上向下排列；行内元素从左到右排列，碰到父元素边缘自动换行）

标准流是最基本的网页布局方式

2.浮动：盒子浮动起来，直到该盒子的边缘遇到另一个盒子边缘          

3.定位

浮动：

任何元素都可以浮动，添加浮动之后具有行内块元素的特性

 浮动的元素会脱离原来的位置，且在一行内显示且元素顶部对齐。

浮动的元素互相靠在一起，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

float:none(默认值不浮动)  ||  left(元素向左浮动)  ||   right(元素向右浮动)

未加浮动：

添加浮动之后

div {
            float: left;
            height: 200px;
            width: 200px;
            background-color: aqua;
        }

指定高度但不指定宽度的浮动

p {
            float: right;
            height: 300px;
            background-color: chartreuse;
        }

给定多个p元素，只添加高不添加宽，会在一行内显示：

 

网页布局的一般策略：

使用标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置