浮动
问题： 在页面上有两个盒子，一个盒子靠着屏幕左侧显示另一个盒子靠着屏幕右侧显示？
浮动作用：解决一行中显示多个盒子的问题（并且这些盒子的位置可控。）
浮动的代码：
float: left;
float: right;
浮动的特点
标准流：就是浏览器默认摆放盒子的标准。
1. 浮动的元素会脱离标准流：
如果一个元素按照正常的标准流来显示，会在html中所属的位置站位，后面的元素会紧跟着它(如图一)。但是浮动脱离了标准流，将来在看到浮动的元素之后，不能以正常的标准流来进行判断。（浮动的元素在标准流中不占位置了，它是在标准流之上（如图二）。）
图一
图二
2.浮动以后的元素会覆盖在标准流的元素之上。如图二。
3.浮动的规则：浮动找浮动，不浮动找不浮动。（浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动。）如：图三和图四；
图三
图四
4.浮动的重点：浮动的元素只会影响下面的元素，不会影响上面的元素
Paste_Image.png
5.浮动的元素会改变显示方式：
不管元素是行内元素还是块级元素将来在显示的时候都会在同一行中显示。
浮动以后的元素可以设置宽高。
总结：浮动以后的元素的显示方式与行内块级元素一样。
浮动的案例：
1.使用浮动完成页面的布局
例如：让两个盒子在同一行中一个靠左，另一个靠右。
Paste_Image.png
2.制作导航
Paste_Image.png
注意：直接使用a标签来制作导航是不合理的
1.)导航与导航之间应该是列表的关系，所以如果想要将这些关系通过html语义化表示出来必须要用到ul标签。
2.)如果这些a标签不用其他标签包裹起来，那么将来浏览器会将这些a标签中的文字当作全部一起显示。SEO在查看页面的时候会认为这个页面进行了作弊，就是进行了关键字的堆砌。
因此必须要用ul中的li标签将a中的内容包裹起来。
3.文字环绕图片：
Paste_Image.png
文章著作权归饥人谷_sunny和饥人谷所有，转载须说明来源
网友评论