浮动

时间 2019-11-17

标签浮动繁體版

原文原文链接

元素设置了float或absolute，脱离了文档流,若是四周元素没有浮动浏览器

<style> 
.c2{ 
  width:500px; 
  height:500px; 
  margin:80px; 
} 
.no1{ 
  border:1px solid; 
  width:100px; 
  height:100px; 
  
} 
.no2{ 
  border:1px solid red; 
  width:200px; 
  height:100px; 
 float:right; 
} 
</style> 
</head> 
<body> 
<div class="c2"> 
<div class="no1"></div> 
<div class="no2"></div> 
</div> 
</body> 



<divclass="checkbox"><label><inputtype="checkbox"value=""> Option one is this and that&mdash;be sure to include why it's great </label></div>

input[type="checkbox"]{
position: absolute;
margin-left: -20px;
margin-top: 4px \9;
} 


.checkbox label {
min-height: 20px;
margin-bottom: 0;
border: 1px solid;
font-weight: normal;
cursor: pointer;
   padding-left: 20px;
}

脱离文档流的元素，仍受父节点的影响

【1】未浮动元素height是相对于其父元素

不浮动的元素默认宽度是100%

浮动的元素宽度是0，须要指定其宽度

【2】浮动元素高度设置成100%

.pos-state

position：absolute

height:100%

body

div.pos-state

此时浮动的div（不管div是嵌套在哪一个元素里面）是相对于浏览器窗口的高度，div随窗口高度的变化而变化。但当浏览器出现滚动条时，下边滚动的部分就没有背景了

透明背景：rgba(255, 255, 255, 0.3)

浮动的元素设置margin负值能够起到位置改变的做用，不浮动设置负值宽度会改变

浮动撑开父元素：针对float脱离文档流的元素，absolute的不行