web前端之路(1)--清除浮动的三种方式

参考地址:
清除浮动
1. clear:both
2. width:100% + overflow:hidden
3. <br/>的添加[不推荐用]

原先:
web前端之路(1)--清除浮动的三种方式_第1张图片
代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> new document </title>
    <meta charset="utf-8">
    <style> *{ padding:0px; margin:0px; font-size:40px; } .div1{ background-color:red; float:left; } .div2{ background-color:blue; float:right; } p{ } </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <p>add监考的角色卢卡斯的杰拉德就是领卡点击大;打开拉萨的啦看电视啦凯迪拉克是的;阿坎德;‘拉达克jfk大;大家</p>
</body>
</html>

效果展示:
1

p{ clear:both; }

web前端之路(1)--清除浮动的三种方式_第2张图片
以下相同

注意:
clear:bothoverflow:hidden的区别:
clear:both是针对相邻的元素,对于父级元素是无效的,父级元素的浮动清除是采用over:hidden

你可能感兴趣的:(web前端)