html5和css篇有关浮动以及如何清除浮动

浮动和盒状模型、定位是CSS重点和难点。浮动，就是让div样式层块，向左或向右（靠）浮动。

Float:left 靠左浮动；Float:right 靠右浮动；clear:both清除浮动，简单举例如下：

CSS样式如下：

.box1{ float:left width:200px height:300px background:#f00}/* 设置div对象浮动靠左*/ 

.box2{ float:rightwidth:200px height:300pxbackground:#0f0}/* 设置div对象浮动靠右 */ 

.clear{ clear:both}/*清除浮动*/

html代码如下：

<div class="divcss5"> 

    <div class="box1">布局靠左浮动</div> 

    <div class="box2">布局靠右浮动</div> 

    <div class="clear"></div><!-- html注释：清除float产生浮动 --> 

</div>

效果如下：

浮动利用好了，再结合相对定位，绝对定位，CSS排版基本上就能搞定了，细节的东西在实践中去体验吧。

手机屏幕出现html的清除方法是调用正则表达式清理html标签。

1、显示的html代码如下：

<table style="width: 300pxtext-align: center" border="1" cellpadding="5"><tr><th width="75"><strong>Name</strong></th><th colspan="2"><span style="font-weight: bold">Telephone</span></th></tr><tr><td>John</td><td><a href="tel:0123456785">0123 456 785</a></td><td><img src="images/check.gif" alt="checked" /></td></tr></table>

2、开始用js的正则表达式清除

stringWithHTML = stringWithHTML.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "")

首先，我们制作一个简单的html页面。父级元素是div，内部元素，是两个ul，两个ul分别是左浮动。并且为父级元素添加边框。

2/7

我们可以发现，父级元素根本没有被子元素的高度所撑开，而是只保持了h标签的高度，这就是浮动，导致的。

3/7

清除浮动，顾名思义就是clear:both，这的确是一种方法，但是要确定我们的clear:both是应用在哪里。

4/7

我们可以在html页面上，最后一个浮动元素的后面，添加一个div，并设置其style为clear:both。

5/7

我们还可以为浮动的元素的父级元素添加伪类，*::after{content""display:blockclear:both}，这样将会使得浮动止于此

6/7

除了这些，我们还可以为父级元素添加overflow属性，可以设为hidden,也可以设为auto

7/7

以上三种方法是小渔自己通过亲身经历，总结而来的哦。正确的页面显示效果如图所示

---