DIV模型和浮动

Div模型:网页的制作实际上就是通过div块堆砌而成的,如下面图:
在这里插入图片描述
在这里插入图片描述

最上层红色板块是漂浮着的 浮动块,它脱离了文档流,可以按照自己想要的位置
去放置,但也带来了一些问题,如下:

  1. 块状元素,会钻进浮动元素的下面,被浮动元素所覆盖,像这样:
    2.
  2. 行内元素,例如文字, 则会环绕在浮动元素的周围,为浮动元素留出空间,像这样:
    在这里插入图片描述

如果不需要这些效果,就需要用到清除浮动clear 来解决,使后面的元素表现的跟浮动前一样,按照文档流的顺序来排版。

*{padding:0px; margin:0px;}
是针对整个页面的。如果想设置页面内部的部分是需要单独设置的。

猜你喜欢

转载自blog.csdn.net/hzm315207040114/article/details/84550649
今日推荐