float浮动
.div1{
width: 100px;
height: 100px;
background: red;
float: left;
}
.div2{
width: 300px;
height: 300px;
background: blue;
float: right;
}
.div3{
width: 100px;
height: 100px;
background: green;
float: inherit;
}
/*设置float会自动变为块状元素,会占用文档流,但会被div包裹*/
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
clear清除浮动副作用
.div1{
width: 100px;
height: 100px;
background: red;
float: left;
}
.div2{
width: 120px;
height: 120px;
background: blue;
/*如何解决占据div的方法,只需要添加clear:left属性,属性的意义是不允许左边有左浮动,right同理,both是都不允许*/
clear: left;
/*或者使用overflow标签,来处理子元素撑破父元素的情况,意义是使修剪溢出元素,使子元素严格在父元素内*/
/*zoom标签也可以使用,一般作用在IE浏览器,两个标签一起使用可以适配所有浏览器
zomm:1;标签的作用就是让父元素完美接纳子元素,让其随子元素大小变化*/
/*还有一种方法是给父元素也添加float属性,就不怕塌陷了,然后再给下面的元素添加clear清除*/
}
.div3{
width: 200px;
height: 400px;
border: 1px solid #ccc;
}
<div class="div3">
<div class="div1"></div>
<div class="div2"></div>
</div>