Home > Web Front-end > HTML Tutorial > float的一点想法_html/css_WEB-ITnose

float的一点想法_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:28:05
Original
901 people have browsed it

刚写代码的时候,突然有个问题,float加在父级元素上和加在子级元素上有什么区别,还有浮动清除的一些问题

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .main{            width: 1000px;            background-color: bisque;            overflow: hidden;        }        .fl{            float: left;        }        .wh200{            width: 200px;            height: 200px;            margin-left: 20px;            background-color: aqua;        }        .clear{            clear: both;        }        .main2{            width: 1000px;            background-color: blue;            height: 400px;        }    </style></head><body><div class="main">    <div class="fl wh200"></div>    <div class="fl wh200"></div>    <div class="fl wh200"></div></div><div class="main2"></div></body></html>
Copy after login

清楚浮动两种方式

1. 父级加overflow:hidden ;

2. 最后一个子级加clear:both

这里的浮动是加在子级元素上的,并且通过overflow: hidden清楚浮动;如果不加浮动清除,那么main1这个父级div是没有高度的,这会导致main2这个div浮上来,如下效果

还有不存在什么父级元素加了浮动,子级元素也浮动,float:left这个属性加给谁,谁就参与浮动。

总结:

套路框架:第一层:页面整体框架overflow:hidden清除浮动;第二层:就是第一层里面的一些元素,比如header里面的logo,search这些,定义高度就行。

<div style="width: 1000px;overflow: hidden">    <div style="float: left;width: 330px">        <div style="width: 200px;height: 50px"></div>        <div style="width: 130px;height: 50px;"></div>    </div>    <div style="float: left;width: 330px"></div>    <div style="float: left;width: 330px"></div></div><div style="width: 1000px;overflow: hidden">    <div style="float: left;width: 330px"></div>    <div style="float: left;width: 330px"></div>    <div style="float: left;width: 330px"></div></div>
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template