float浮动总结

原创 2019-01-23 22:57:35 247
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

.box1,.box2,.box3{width: 100px;height: 100px;background-color: red;float: left;}

.box2{background-color:royalblue;}

.box3{background-color:skyblue;}

.demo{border: 1px solid red;padding: 10px;clear: both;}

.box1{float: right}

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<div class="demo">这是浮动demo</div>



<!--

       总结:浮动

       float:left

       float:right


       清楚浮动  

       clear:both

       overflow:hidden

   -->

</body>

</html>


批改老师:天蓬老师批改时间:2019-01-24 08:52:44
老师总结:overflow:hidden, 这是非常推荐的方案, 特别是在BFC块中

发布手记

热门词条