設置隔離層清除浮動

時間 2019-11-24

標籤設置隔離層清除浮動简体版

原文原文鏈接

今天看的項目視頻，學到了一個新的清除浮動的方法，經過這個方法，加深了對浮動影響的理解。css

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮動的影響</title>
<style type="text/css"> .div1,.div2,.div3,.div4{ width:50px; height:50px; float:left;
} .div1{ background:red;
} .div2{ background:blue;
} .div3{ background:green;
} .div4{ background:pink;
} .box{ border:1px solid black;
} .box1{ width:100px; height:200px; background:yellow;
}
</style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div> 
        <div class="div4"></div>
    </div>
    <div class="box1"></div>
</body>
</html>