html中页面布局—浮动

folat:浮动
none:不浮动，默认
left:向左浮动
right:向右浮动
auto:根据自身所占位置，自动居中
1）、自身必须有宽高
2）、inline-block或folat都会使auto失效
3）、需要填写具体值来调整元素位置

浮动产生的影响：
1）、自身的父元素无法获取宽高
2）、后续的元素会自动补位
3）、浮动会脱离当前文档流，覆盖标准流的元素
4）、auto会失效
5）、块元素可以横排显示（失去独占一行的特性）
6）、行元素可以设置宽和高
7）、除了auto以外，依然支持margin
8）、提升了半个层级z-index（后续会讲到）

使用浮动布局，那么一定要清除浮动，否则会很严重！！！页面会爆炸！！
清除浮动的常见方法有以下几种：
1）、给父级设置宽高
缺点：父级如果作为容器，直接写死了，后续元素添加会出现问题，而且无法解决元素重叠的问题
2）、使用overflow:hidden属性（超出内容区域的部分，隐藏）给父元素添加
缺点：如果内容需要超出，或者较多时，需求发生冲突；如果内容没有超出，推荐使用，较为方便
使用场景：浮动元素较少时

<div id="main" style="overflow: hidden;">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
</div>

3）、使用clear:both属性
clear:是否允许浮动
left:不允许左侧有浮动
right:不允许右侧有浮动
both:不允许两侧有浮动
缺点：需要写一个空标签来绑定clear属性，这个空标签没有html的作用，不符合html标签语义化

<div id="main">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>

	<div style="clear: both; width: 0px; height: 0px"></div>
</div>

4）、给父级设置display:inline-block;
缺点：父元素的同级之间会有间隔

<div id="main" style="display: inline-block;">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
</div>

5）、各大主流浏览器之间，兼容性最高的一款，值得拥有~
：after伪类：在…之后添加…

//制作工具
.clearfix:after{
		content: "";
		display: block;
		height: 0px;
		clear: both;
}; 
//激活工具
.clearfix{
		zoom:1;
}
//使用工具
<div class="box clearfix">
	<div class="left">我是左浮动</div>
</div>

来源：CSDN

作者：前端小布丁

链接：https://blog.csdn.net/weixin_46191548/article/details/104124552

标签

页面布局

auto