Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
80 lines (70 sloc) 1.4 KB
<div class="layout"
:data-clear="clear" >
<div class="float">
:content='clear ? "clearfix" : "no fix"'
@click="toggleClear" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis laudantium ea tenetur quas incidunt. Voluptatibus veritatis, rerum vitae illum, recusandae quis. Recusandae quisquam sunt id, eius debitis quos animi hic.
<div class="next">Next! (not floating)</div>
<div class="last">Last! (floating)</div>
import ButtonStyle from '~/components/utility/ButtonStyle.vue';
export default {
components: {
data() {
return {
clear: false
methods: {
toggleClear() {
this.clear = !this.clear;
<style lang="scss" scoped>
.layout {
background: white;
border: 1px solid;
margin: 2em;
padding: 1rem;
[data-clear] {
&::after {
background: red;
clear: both;
content: 'this is my clearfix';
display: table;
.float {
border: 1px solid red;
float: left;
margin-right: 1em;
resize: both;
overflow: auto;
padding: 0.5rem;
.last {
border: 1px solid blue;
margin-bottom: 1em;
padding: 0.5rem;
.last {
float: left;
button {
font: inherit;
You can’t perform that action at this time.