关于HTML+CSS页面设计的记录
关于浮动float的用法
元素开了浮动会带来以下效果
-
元素会脱离原来的文档流，不再占据原页面的位置，后面的元素进行补位，可以把页面看作楼层，大家原本都在一楼，加了浮动就相当于上了二楼，形如下图：
未加浮动
对div1加上左浮动
可以看到黄色的div2占据了原来div1的位置，而文字"子元素div2"被挤了下来，div2对div1进行补位操作。 -
浮动元素会停留在父元素的左右两边，例如以上的例子，加了左浮动的div2还是会靠在父元素(灰色框)的左上角，如果是右浮动就是靠在父元素的右边了；浮动元素也会停留在其他浮动元素边缘，例如再给div1加上左浮动，形如：
这样两个div都有左浮动，div2会停留在div1的旁边。 - 浮动可以满足在一行中放置多个块级元素的要求，比如说一个div内需要放置多个元素，例如表格和其他的div元素，形如下图：
针对这种情况，可以对左边的"我的京东"和右边的表格同时做左浮动的操作。