css学习_css浮动

水深无声 2021-12-20 01:59 400阅读 0赞

1、文档流介绍

网页布局的核心就是利用css来摆放盒子，

把盒子摆放在合适的位置。

css的定位机制有以下3种（网页布局一般需要3种搭配使用）：

a、普通流（标准流）

![1151059-20190310144014616-632152045.png][]

b、浮动

![1151059-20190310144627391-842984783.png][]

![1151059-20190310145732214-468424721.png][]

![1151059-20190310150432237-1216896464.png][]

1、浮动只有左右。

2、浮动后找离他最近的父元素靠左/右对齐。

3、！！！一个父盒子里的子盒子，如果其中一个子元素有浮动的话，则其他子元素都需要浮动，这样才能一行显示。

![1151059-20190310151515995-1062460136.png][]

4、浮动飘在标准流的上面，压住标准流。

5、浮动元素有哪些特性？（浮动影响盒子显示模式）

1、块级元素浮动后会有行内块特性

2、行内元素浮动后也具有行内块特性

![1151059-20190310152224398-451051783.png][]

6、！！！浮动的使用方式：浮动首先要用标准流父级包裹起来

![1151059-20190310150028985-788471351.png][]

![1151059-20190310155039114-1815187624.png][]

![1151059-20190310155343606-582598066.png][]

！！！浮动的元素要用标准流的块级包裹

浮动的目的：就是为了让多个块级元素一行显示

7、 浮动的特性：

![1151059-20190310152654632-739097144.png][]

c、定位

后面更新。。。

2、版心和布局流程

版心： ![1151059-20190310153128554-316820948.png][]

布局流程：

![1151059-20190310153453369-1048521214.png][]

注意：先看行再看列，一行一行的做。

常见案例：

一：

![1151059-20190310154659118-35939965.png][]

![1151059-20190310154531044-906553284.png][]

二：所有列的必定有个行包裹，类似于表格（因为浮动会影响后面的别人）

![1151059-20190310161051742-404956166.png][]

![1151059-20190310162209918-628189635.png][]

转载于:https://www.cnblogs.com/yangyutian/p/10505689.html

[1151059-20190310144014616-632152045.png]: /images/20211220/c51806d6dabe49a6ae5ca4f19765ba74.png
[1151059-20190310144627391-842984783.png]: /images/20211220/51996334e8544b3187a08cbcfb9fe602.png
[1151059-20190310145732214-468424721.png]: /images/20211220/cd5da100700f4ae1adbdbf6b7ecd4847.png
[1151059-20190310150432237-1216896464.png]: /images/20211220/73d22fc868be44d5a8118dcafaa39aef.png
[1151059-20190310151515995-1062460136.png]: /images/20211220/cec13fda1fbd4d599f831c7e8be8cc98.png
[1151059-20190310152224398-451051783.png]: /images/20211220/d6d986fc7fcc40c1b5085b5c0d2c6ac9.png
[1151059-20190310150028985-788471351.png]: /images/20211220/f19b28c3b0724540b0a55f1be2867976.png
[1151059-20190310155039114-1815187624.png]: /images/20211220/2e7287bd1c7343eb972384c2b9fe3324.png
[1151059-20190310155343606-582598066.png]: /images/20211220/1cb5c3be2490451f977cf4bd151fbe16.png
[1151059-20190310152654632-739097144.png]: /images/20211220/27ee32d0fb664e19991f453df923b82a.png
[1151059-20190310153128554-316820948.png]: /images/20211220/607747bcc4a04002b91ae5ad7e8fa43a.png
[1151059-20190310153453369-1048521214.png]: /images/20211220/d0d25ce668c14349adb8dcff93b738d2.png
[1151059-20190310154659118-35939965.png]: /images/20211220/e8661d515b734c809cdab877d6b9e2a3.png
[1151059-20190310154531044-906553284.png]: https://img2018.cnblogs.com/blog/1151059/201903/1151059-20190310154531044-906553284.png
[1151059-20190310161051742-404956166.png]: https://img2018.cnblogs.com/blog/1151059/201903/1151059-20190310161051742-404956166.png
[1151059-20190310162209918-628189635.png]: https://img2018.cnblogs.com/blog/1151059/201903/1151059-20190310162209918-628189635.png