一.浮动

1.浮动就是可以使一个元素向其父元素的左侧或右侧移动

2.通过float属性来设置元素的浮动，可选值如下：

（1）float：none；默认值，表示不浮动
（2）float：left；向左浮动
（3）float：right；向右浮动

3.当元素设置浮动后，水平布局等式就不强制成立

4.元素设置浮动后，就会脱离文档流，不在占用文档流的位置，所以原本元素下面的元素会自动向上移动，后边元素不设置浮动会与浮动元素垂直排列，不设置浮动看不到

5.浮动元素不会移出父元素，父元素看成他的边界

6.浮动元素向左或向右移动时，不会超过前面的浮动元素，会接着之前浮动的元素继续水平排列

7.若浮动元素上面有未设置浮动的块元素，即使有位置，也不会向上浮动。也就是说：浮动不会影响它前面的文档流

8.浮动元素跟他前面的浮动元素为准，不会超过他前面的浮动元素

9.通过浮动可以达到让元素水平布局的效果

image.png

10.浮动不会遮挡文字，文字会自动围绕在浮动元素的周围，可以用浮动来设置文字围绕图片的效果

image.png

11.块元素脱离文档流的特点

（1）块元素不在独占一行
（2）默认块元素宽度和高度被内容撑开，有内容决定大小

12.行内元素脱离文档流的特点：

（1）行内元素脱离后变成行内块元素，特点同块元素

13.元素脱离文档流后，不再区分块元素和行内元素，都具有行内块元素的特性

二.实现简单布局

1.效果图：

image.png

2.代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>网页布局</title>
  8. <style>
  9. header,main,footer{
  10.   width: 1000px;
  11.   margin: 0 auto;
  12. }
  13. header{     
  14.   height: 150px;
  15.   background-color: rgb(99, 99, 102);
  16. }
  17. main{
  18.   height: 400px;
  19.   background-color: rgb(241, 241, 243);
  20.   margin: 10px auto;
  21. }
  22. nav{
  23.   width: 190px;
  24.   height: 100%;
  25.   background-color: blueviolet;
  26.   float: left;
  27. }
  28. article{
  29.   width: 600px;
  30.   height: 100%;
  31.   background-color: violet;
  32.   float: left;
  33.   margin: 0 10px;
  34. }
  35. aside{
  36.   width: 190px;
  37.   height: 100%;
  38.   background-color: rgb(153, 10, 10);
  39.   float: left;
  40. }
  41. article div{
  42.   width: auto;
  43.   background-color: teal;
  44.   float: left;
  45. }
  46. footer{
  47.   height: 150px;
  48.   background-color: rgb(149, 173, 13);
  49. }
  50. </style>
  52. </head>
  53. <body>
  54. <header></header>
  55. <main>
  56. <nav></nav>
  57. <article></article>
  58. <aside></aside>
  59. </main>
  60. <footer></footer>
  61. </body>
  62. </html>

三.高度塌陷和BFC

1.如果主类高度写死，内容过多或过少都会体验感不佳，所以设置时高度一般不能写死

2.高度塌陷：在布局中，父元素的高度是被子元素撑开的，子元素变大父元素就变大，反之变小。而在子元素设置浮动后，会完全脱离文档流，就无法撑起父元素，使父元素的高度丢失

3.发生高度塌陷，父元素就会丢失高度，其下的元素会上移，导致页面布局混乱

4.解决高度塌陷的方法：

（1）内容固定的话将高度写死
（2）BFC(Block Formatting Context)-块级格式化环境
（3）clear方法
（4）after伪类
（5）clearfix

5.BFC是CSS中隐含的属性，可以为一个元素开启BFC

（1）开启BFC的元素会变成一个独立的布局区域
（2）元素开启BFC的特点：

  • 开启了BFC的元素不会被浮动元素覆盖
  • 开启了BFC的元素子元素和父元素的外边距不会重叠

  • 开启了BFC的元素可以包含浮动的子元素

    6.开启BFC的方法（不能直接开启）

    （1）设置元素浮动
    （2）将元素设置为行内块元素
    （3）给元素的父元素设置overflow属性，设置为一个非visible的值，属性值还有：

  • hidden

  • auto

  • scroll

    四.clear属性

    1.作用：清除浮动元素对当前元素的影响

    2.属性的可选值：

    （1）left：清除左侧浮动元素对当前元素的影响
    （2）right：清除右侧浮动元素对当前元素的影响
    （3）both：清除两侧中影响最大的一侧

    3.原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，使其位置不受影响

    五.after伪类-解决高度塌陷的方案（给父元素添加该属性）

    1.先选中一个元素，然后::after表示选择该元素最后一个元素

    就相当于在最里面设置了一个块元素

    image.png

    六.clearfix（给父元素添加该属性）

    1.即解决高度塌陷又解决外间距重叠

    image.png

    七.元素的显示与隐藏、

    1.display属性，可选值如下：

    （1）none：隐藏对象，不会占有原来的位置
    （2）block：除了转为块元素之外，还可以显示元素
    （3）还可以用该属性转换元素格式：

  • inline-block：行内块元素；

  • block：块元素；
  • inline：行内元素

    2.visibility属性，可选值如下：

    （1）visible：元素可视；
    （2）hidden：元素隐藏，但是会继续占有位置

    3.overflow属性，属性值如下：

    （1）visible：超出的部分就超出显示
    （2）hidden：超出部分隐藏
    （3）scroll：不管超出与否，始终显示滚动条
    （4）auto：超出会自动显示滚动条，不超出就没有