css中float left与float right的使用说明.docx
《css中float left与float right的使用说明.docx》由会员分享,可在线阅读,更多相关《css中float left与float right的使用说明.docx(8页珍藏版)》请在冰豆网上搜索。
css中floatleft与floatright的使用说明
No!
要注意以下几点:
1、浮动元素会被自动设置成块级元素,相当于给元素设置了display:
block(块级元素能设置宽和高,而行内元素则不可以)。
2、浮动元素后边的非浮动元素显示问题。
3、多个浮动方向一致的元素使用流式排列,此时要注意浮动元素的高度。
4、子元素全为浮动元素的元素高度自适应问题。
以下详细分析四个问题。
一、浮动元素自动变块级元素
首先说说块级元素和行内元素区别,简单的来说,块级元素独占一行,可以设置宽高以及边距,行内元素不会独占一行,设置宽高行距等不会起效。
常见的块级元素有:
h1~h6、p、div、ul、table,常见的行内元素有:
span、a、input、select等。
示例代码:
复制代码
代码如下:
200px;width:
200px;">
left;width:
150px;height:
150px;margin:
5px;padding:
5px;
border:
solid1pxred;background-color:
Olive;">浮动元素span