返回
css中float left与float right的使用说明

css中float left与float right的使用说明

ID：38100804

大小：45.76 KB

页数：11页

时间：2019-06-06

css中float left与float right的使用说明_第1页
css中float left与float right的使用说明_第2页
css中float left与float right的使用说明_第3页
css中float left与float right的使用说明_第4页
css中float left与float right的使用说明_第5页
资源描述：

《css中float left与float right的使用说明》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、No!要注意以下几点：1、浮动元素会被自动设置成块级元素，相当于给元素设置了display:block（块级元素能设置宽和高，而行内元素则不可以）。2、浮动元素后边的非浮动元素显示问题。3、多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度。4、子元素全为浮动元素的元素高度自适应问题。以下详细分析四个问题。一、浮动元素自动变块级元素首先说说块级元素和行内元素区别，简单的来说，块级元素独占一行，可以设置宽高以及边距，行内元素不会独占一行，设置宽高行距等不会起效。常见的块级元素有：h1~h6、p、div、ul、table，常见的行内元素有：

2、span、a、input、select等。示例代码：复制代码代码如下:浮动元素span

3、t:150px;margin:5px;padding:5px;border:solid1pxred;background-color:Olive;">浮动元素span

效果如下：二、浮动元素后的非浮动元素问题浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在浮动元素“之下”显示。示例代码如下：复制代码代码如下:

4、:600px;height:500px;border:solid1pxblue;background-color:yellow;">浮动DIV

跟在浮动元素后边的D

5、IV

跟在浮动元素后边的span效果图如下：从图中可以看出来，跟在浮动div后边的div背景以及边框被压在了底下，内容却没有，span整体都在浮动div之上显示。 不过在ie6这个效果却很怪异，如图：浮动元素没有压在非浮动div之上，反而把span压住了。三、多个并列同方向浮动元素高度不一致问题多个同方向浮动元素若是高度不一致的话，很可能会得到意外的效果，跟你想要的布局

6、差别很大。多个同方向浮动元素一般是按照流式布局，一行满了则自动换行，也就是类似于以下效果：但各个浮动元素高度不一致的话效果很可能出现下边的情况：很意外吧，主要排列到元素7的时候，一行已经显示不下了，所以要换行，但此处换行并不是从行头开始，而是从元素5那开始，因为元素5比元素6高很多导致。四、子元素全为浮动元素高度自适应问题由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。解决此问题最常用的办法由两种，第一种就是在所有浮动元素后加:第二种办法，使用万能c

7、lear：复制代码代码如下:.clearfix:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0;}*html.clearfix{zoom:1;}*:first-child+html.clearfix{zoom:1;}然后在你需要自适应的元素上加上class=”clearfix”即可。详细请参考：你真的理解clear：both吗在开发中，从美工MM给你Html代码中，肯定能经常看”

8、iv>”这样的代码，但是你真的能明白它是做什么用的吗？如：复制代码代码如下:

当前文档最多预览五页，下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文
温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。