css中float left与float right的使用说明.docx
- 文档编号:6884644
- 上传时间:2023-01-12
- 格式:DOCX
- 页数:8
- 大小:34.20KB
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
200px;width: 200px;"> 150px;height: 150px;margin: 5px;padding: 5px;border: solid1pxred; background-color: Olive;">浮动元素span
效果如下:
二、浮动元素后的非浮动元素问题
浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时,行内元素边框、背景和内容都在该浮动元素“之上”显示,若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时,该块级元素边框和背景在该浮动元素“之下”显示,只有内容在浮动元素不在浮动元素“之下”显示。
示例代码如下:
复制代码
代码如下:
600px;height: 500px;border: solid1pxblue;background-color: yellow;"> left;width: 250px;height: 250px;border: solid1pxAqua;background-color: gray; margin: 10px0010px;"> 浮动DIV
red;border: solid1pxgreen;width: 300px;height: 150px;"> 跟在浮动元素后边的DIV
red;border: solid1pxgreen;margin: 000-50px;"> 跟在浮动元素后边的span